[英]Unable to add active class to a menu list
I have side menubar in my page.when menu list is clicked,page will be redirected depends on the href
. 我的页面上有侧面菜单栏。单击菜单列表时,页面将根据
href
进行重定向。
After redirecting the page I need to add active class to the clicked li
using url to keep the menu list opened. 重定向页面后,我需要使用url将活动类添加到单击的
li
以保持菜单列表处于打开状态。 I have written the following code to achieve this. 我已经编写了以下代码来实现此目的。
$(document).ready(function() {
pageUrl = '/employee/Home'
$('#sidebar-left .nav li.active').removeClass("active");
if (pageUrl) {
$('.nav li:has(a[href="' + pageUrl + '"])').addClass("active");
}
})
Here I have hardcoded the url
for sample. 在这里,我已经对示例的
url
进行了硬编码。
Now my problem is whenever I click the list
, active
class is added to the content of the href
page. 现在我的问题是,每当我单击
list
, active
类就会添加到href
页面的内容中。
ie. 即。 this url
href="/documents/doc_details"
page has nav list
and each li has forms
so active
class is added to the full content of href="/documents/doc_details"
. 此url
href="/documents/doc_details"
页面具有nav list
,每个li都有forms
因此将active
类添加到href="/documents/doc_details"
的全部内容中。
I dont understand why am unable to add active
class to only the clicked li? 我不明白为什么无法仅将
active
类添加到单击的li?
Just a sample: https://jsfiddle.net/tphdp1fa/ (no inner pages) 只是一个示例: https : //jsfiddle.net/tphdp1fa/ (无内页)
Can anyone help me?Thanks !!. 谁能帮助我?谢谢!!。
Use click
event for the a
tag as below code snippets for enabling and disabling the active class. 如下代码片段所示,将
click
事件用于a
标签,以启用和禁用活动类。
Example: 例:
$(document).ready(function() { pageUrl = '/employee/Home' $('#sidebar-left .nav li.active').removeClass("active"); if (pageUrl) { $('.nav li:has(a[href="' + pageUrl + '"])').addClass("active"); } }); $("body").on("click", "a", function(e) { e.preventDefault(); //Prevented the default action of "a" tag for demo pageUrl = $(this).attr("href");//Give your own link here $('#sidebar-left .nav li.active').removeClass("active"); if (pageUrl) { $('.nav li:has(a[href="' + pageUrl + '"])').addClass("active"); } });
.active { color: red; } a { text-decoration: none; color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sidebar-left" class="col-xs-2 col-sm-2"> <ul class="nav main-menu"> <li class="dropdown ng-scope" ng-repeat="parent in menu"> <a href="/employee/Home" class="dropdown-toggle" ng-click="tabName(parent.name)"> <i class="fa fa-home"></i> <span class="hidden-xs ng-binding">Home</span> </a> </li> <li class="dropdown ng-scope" ng-repeat="parent in menu"> <a href="/documents/doc_details" class="dropdown-toggle" ng-click="tabName(parent.name)"> <i class="fa fa-file-text"></i> <span class="hidden-xs ng-binding">Documents</span> </a> </li> <li class="dropdown ng-scope" ng-repeat="parent in menu"> <a href="#" class="dropdown-toggle" ng-click="tabName(parent.name)"> <i class="fa fa-money"></i> <span class="hidden-xs ng-binding">Pay & Benifits</span> </a> <ul class="dropdown-menu"> <li ng-repeat="child in parent.children" class="ng-scope"> <a href="/pay/paymanagement" ng-click="tabName(child.name)" class="ng-binding">slips</a> </li> </ul> </li> </ul> </div>
Note: I have prevented the default action of "a" tag using e.preventDefault();
注意:我已经使用
e.preventDefault();
阻止了“ a”标签的默认操作e.preventDefault();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.