我正在使用以下jquery
<script>
$(document).ready(function () {
$('#menu-wplook-main-menu').find('li a').click(function () {
$('#menu-wplook-main-menu').find('li a').removeClass('active');
$(this).addClass('active');
$($(this)
.closest('li.menu-item')
.children()[0]).addClass('active');
});
});
</script>
我的css
<style>
#menu-wplook-main-menu li a.active {
color:#e53b51;
background: blue;
}
</style>
我的HTML
<ul class="nav nav-tabs" role="tablist" id="menu-wplook-main-menu" >
<li role="presentation">
<a class="dropdown-toggle has-submenu cursor_pointer" href="index.php"> Home </a>
</li>
<li role="presentation menuli menulixl root" class="menu-item">
<a class="dropdown-toggle has-submenu cursor_pointer cursor_pointer" href=""> Services <span class="sub-arrow"></span> </a>
<ul class="dropdown-menu multimenu multimenuxl vbghno sm-nowrap" style="min-width: 10em; max-width: 40em; top: auto; left: 0px; margin-left: -117px; width: auto; margin-top: -1px;">
<li class="col-xs-12">
<!--<a class="splhed" href="">Software Development</a>-->
<a class="levelmenu" href="trav_port.php">Travel Portal Development</a>
<a class="levelmenu" href="GDS_integ.php">GDS Integrations</a>
<a class="levelmenu" href="xml_api_integ.php">XML/API Integrations</a>
<a class="levelmenu" href="white_label_web.php">White Label Website</a>
<a class="levelmenu" href="Hotel_Cab_portal.php">Hotel & Cab Portal Development</a>
<a class="levelmenu" href="travel_web.php">Travel Website Designing</a>
<a class="levelmenu" href="mobile_app_dev.php">Mobile Apps Development</a>
</li>
</ul>
</li>
<li role="presentation" class="menu-item">
<a class="dropdown-toggle has-submenu cursor_pointer" href=""> Products <span class="sub-arrow cursor_pointer"></span> </a>
<ul class="dropdown-menu multimenu multimenuxl vbghno sm-nowrap" style="min-width: 10em; max-width: 40em; top: auto; left: 0px; margin-left: -117px; width: auto; margin-top: -1px;">
<li class="col-xs-12">
<a class="levelmenu" href="trav_portal.php">Travel Portal</a>
<a class="levelmenu" href="travsoft.php">Travsoft</a>
<a class="levelmenu" href="white_label.php">White label</a>
<a class="levelmenu" href="hotel_extranet.php">Hotel Extranet</a>
<a class="levelmenu" href="holiday_manage.php">Holiday Management System</a>
<a class="levelmenu" href="hotrl_crs.php">Hotel CRS</a>
</li>
</ul>
</li>
</ul>
如果我不在href中使用PHP链接，它可以很好地工作。但是如果我在href中使用PHP链接它不起作用。
问题
我应该更改PHP文件中的任何内容吗？
答案 0 :(得分：0)
似乎工作正常。你的jQuery可能有点清理。例如：
$('#menu-wplook-main-menu li a').click(function () {
$('#menu-wplook-main-menu .active').removeClass('active');
$(this).addClass('active');
$(this).closest('li.menu-item').children().first().addClass('active');
});
但我认为您的主要问题是，当您点击链接时，您会导航到新页面。所以你重新加载整个菜单，并没有任何状态。并从头开始。
您可能需要一个可以从当前地址获取页面的功能，查找菜单项并突出显示它。
如果用＃1，＃2等替换所有.php链接，它可以正常工作。
所以要么是一个加载函数，要么加载带有ajax的东西。
答案 1 :(得分：0)
试试这个：
$(document).ready(function(){
$(".dropdown-menu a").on("click",function(){
$(".dropdown-toggle").removeClass("active");
$(this).closest(".menu-item").find(".dropdown-toggle").addClass("active");
})
})
最终代码：
我将href更改为＃以进行测试：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
.active {
color:#e53b51;
background: blue;
}
</style>
My html
<ul class="nav nav-tabs" role="tablist" id="menu-wplook-main-menu" >
<li role="presentation">
<a class="dropdown-toggle has-submenu cursor_pointer" href="index.php"> Home </a>
</li>
<li role="presentation menuli menulixl root" class="menu-item">
<a class="dropdown-toggle has-submenu cursor_pointer cursor_pointer" href=""> Services
<span class="sub-arrow"></span>
</a>
<ul class="dropdown-menu multimenu multimenuxl vbghno sm-nowrap" style="min-width: 10em; max-width: 40em; top: auto; left: 0px; margin-left: -117px; width: auto; margin-top: -1px;">
<li class="col-xs-12">
<!--<a class="splhed" href="">Software Development</a>-->
<a class="levelmenu" href="#">Travel Portal Development</a>
<a class="levelmenu" href="#">GDS Integrations</a>
<a class="levelmenu" href="#">XML/API Integrations</a>
<a class="levelmenu" href="#">White Label Website</a>
<a class="levelmenu" href="#">Hotel & Cab Portal Development</a>
<a class="levelmenu" href="#">Travel Website Designing</a>
<a class="levelmenu" href="#">Mobile Apps Development</a>
</li>
</ul>
</li>
<li role="presentation" class="menu-item">
<a class="dropdown-toggle has-submenu cursor_pointer" href=""> Products <span class="sub-arrow cursor_pointer"></span> </a>
<ul class="dropdown-menu multimenu multimenuxl vbghno sm-nowrap" style="min-width: 10em; max-width: 40em; top: auto; left: 0px; margin-left: -117px; width: auto; margin-top: -1px;">
<li class="col-xs-12">
<a class="levelmenu" href="#">Travel Portal</a>
<a class="levelmenu" href="#">Travsoft</a>
<a class="levelmenu" href="#">White label</a>
<a class="levelmenu" href="#">Hotel Extranet</a>
<a class="levelmenu" href="#">Holiday Management System</a>
<a class="levelmenu" href="#">Hotel CRS</a>
</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".dropdown-menu a").on("click",function(){
$(".dropdown-toggle").removeClass("active");
$(this).closest(".menu-item").find(".dropdown-toggle").addClass("active");
})
})
</script>
</body>
</html>