我想要一个jQuery动态菜单,该菜单可以导航到a标签和一个包含在url页面中的标签。
$('ul.nav.navbar-nav.side-nav.nicescroll-bar li').find('a').each(function() {
var text = $(this).attr("href");
if (window.location.href.includes(text)) {
$('ul.nav.navbar-nav.side-nav.nicescroll-bar li a').addClass('active')
} else {}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav side-nav nicescroll-bar" style="overflow: hidden; width: auto; height: 100%;">
<li><a href="home">home</a></li>
<li><a href="dashboard">dashboard</a></li>
<li><a href="base">base</a></li>
<li><a href="test">test</a></li>
</ul>
在此代码中,所有菜单都有颜色更改,应根据页面的地址更改菜单的颜色。
答案 0 :(得分:3)
只需删除else中的类:
if (window.location.href.includes(text)) {
$(this).addClass('active')
} else {
$(this).removeClass('active')
}
答案 1 :(得分:1)
更改
if (window.location.href.includes(text)) {
$('ul.nav.navbar-nav.side-nav.nicescroll-bar li a').addClass('active')
}
进入
if (window.location.href.includes(text)) {
$(this).addClass('active')
}
答案 2 :(得分:1)
当您使用它添加类时它会起作用。我将一个href更改为stack,因为该片段的href类似于stacksnippet。对于该元素,其颜色为红色。
$('ul.nav.navbar-nav.side-nav.nicescroll-bar li').find('a').each(function() {
var text = $(this).attr("href");
if (window.location.href.includes(text)) {
$(this).addClass('active')
}
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav side-nav nicescroll-bar" style="overflow: hidden; width: auto; height: 100%;">
<li><a href="home">home</a></li>
<li><a href="dashboard">dashboard</a></li>
<li><a href="stack">base</a></li>
<li><a href="test">test</a></li>
</ul>
答案 3 :(得分:1)
您可以简化选择器和代码,并使用.filter()
代替start_date = "2018-05-22"
end_date = "2018-10-11"
some_true_date = "2018-06-21" # It is in start_date and end_date
some_false_date = "2017-03-03" # It is not in start_date and end_date
# assuming that I have method 'check_date' that returns boolean type result.
if check_date(some_true_date):
print("True") # >>> True
if check_date(start_date):
print("True") # >>> True
if check_date(end_date):
print("True") # >>> True
if not check_date(some_false_date):
print("False") # >>> False
.each()
$('ul.navbar-nav li a').filter(function(){
return window.location.href.includes($(this).attr('href'));
}).addClass('active');
window.location.href = "#home";
$('ul.navbar-nav li a').filter(function(){
return window.location.href.includes($(this).attr('href'));
}).addClass('active');
.active {color:red}