我创建了一个Web应用程序，我想突出显示所选的菜单。
以下是我的内容
<div style="width: 80%;" align="left" >
<span style="display:inline-block;" align="left" >
<div id="menubar" class="grid-block">
<nav id="menu">
<ul class="menu menu-dropdown ">
<li class="level1 item101 active">
<a href="index.xhtml" class="level1">
<span>
<span class="icon" style="background-image: url('images/menu/icon_menu_home.png');background-repeat: no-repeat; background-position: top center">
</span>
Home
</span>
</a>
</li>
<li class="level1 item102 parent makeSpace default"
style="#{!PersonalInformationDataBean.pageViewData.contains('registerForPatentss') && !PersonalInformationDataBean.pageViewData.contains('success') && !PersonalInformationDataBean.pageViewData.contains('getReportss') && !PersonalInformationDataBean.pageViewData.contains('searhPatentss') ?'display:none':'display:inherit'};">
<a href="" class="level1 parent">
<span>
<span class="icon" style="background-image: url('images/menu/icon_menu_features.png');background-repeat: no-repeat; background-position: top center">
</span>Projects/Inventions
</span>
</a>
<div class="dropdown columns1">
<div class="dropdown-bg" style="overflow: hidden; width: 239px; height: 202px; ">
<div>
<div class="width100 column">
<ul class="level2">
<li class="level2 item200" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('registerForPatentss')?'display:inherit':'display:none'}">
<a href="registerForPatentss.xhtml" class="level2">
<span>Register New Applicant
</span>
</a>
</li>
<li class="level2 item201" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('success')?'display:inherit':'display:none'}">
<a href="success.xhtml" class="level2">
<span>Register New Project
</span>
</a>
</li>
<li class="level2 item202" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('getReportss')?'display:inherit':'display:none'}">
<a href="getReportss.xhtml" class="level2">
<span>Project Reports
</span>
</a>
</li>
<li class="level2 item203" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('searhPatentss')?'display:inherit':'display:none'}">
<a href="searhPatentss.xhtml" class="level2">
<span>Search For Project
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="level1 item102 parent makeSpace default" style="#{!PersonalInformationDataBean.pageViewData.contains('systemLog') && !PersonalInformationDataBean.pageViewData.contains('addUser') && !PersonalInformationDataBean.pageViewData.contains('changePass') && !PersonalInformationDataBean.pageViewData.contains('userlistss')?'display:none':'display:inherit'}">
<a href="" class="level1 parent">
<span>
<span class="icon" style="background-image: url('images/menu/icon_menu_features.png');background-repeat: no-repeat; background-position: top center">
</span>Administrative
</span>
</a>
<div class="dropdown columns1">
<div class="dropdown-bg" style="overflow: hidden; width: 209px; height: 202px; ">
<div>
<div class="width100 column">
<ul class="level2">
<li class="level2 item200" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('addUserss')?'display:inherit':'display:none'}">
<a href="addUserss.xhtml" class="level2">
<span>Add User Account
</span>
</a>
</li>
<li class="level2 item201" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('logPatentSystemss')?'display:inherit':'display:none'}">
<a href="logPatentSystemss.xhtml" class="level2">
<span>System Log
</span>
</a>
</li>
<li class="level2 item202" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('changePass')?'display:inherit':'display:none'}">
<a href="changePass.xhtml" class="level2">
<span>Change Password
</span>
</a>
</li>
<li class="level2 item203" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('userlistss')?'display:inherit':'display:none'}">
<a href="userlistss.xhtml" class="level2">
<span>Details Of Registered Users
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
</span>
</div>
这给我输出如下（它不相同，但有点像这样）。
Home | Projects | Administrative
| |
| |
|- Men 1 |- Ad 1
|- Men 2 |- Ad 2
|- Men 3 |- Ad 3
现在我想做的是
选择男性1时，<li class="level1 item102 parent makeSpace default"应更改为<li class="level1 item102 parent makeSpace active"，即取出default并参加active课程。
当我点击Ad 2时，<li class="level1 item102 parent makeSpace default"应更改为<li class="level1 item102 parent makeSpace active"
知道如何完成这项工作吗？我在线检查，但是我得到的例子是0级菜单。
答案 0 :(得分：0)
请参阅 demo
<强> jQuery的：
$("#menubar").on("click","li",function(e){
e.preventDefault();
e.stopPropagation();
if($(this).hasClass("active"))
{
$(this).removeClass("active").addClass("default");
}
else
{
$(this).addClass("active").removeClass("default");
}
});
答案 1 :(得分：0)
我所做的就是下面......
var myURL = window.location.toString();
var endIndex = myURL.lastIndexOf(".", myURL);
var startIndex = myURL.lastIndexOf("/")+1;
var pageAccessed = myURL.substr(startIndex, endIndex-startIndex);
if (pageAccessed=="successLoginss") {
$(".homemenu").addClass("active");
$(".homemenu").removeClass("default");
}
<li class="level1 item101 default homemenu">
<a href="index.xhtml" class="level1">
<span>
<span class="icon" style="background-image: url('images/menu/icon_menu_home.png');background-repeat: no-repeat; background-position: top center">
</span>
Home
</span>
</a>
</li>
Dats it .....我知道这不是正确的方法，但我必须这样做......