我们在使用Bootstrap的导航条组件时,会面临用户点击对应导航条内容时动态添加激活效果的问题,即动态添加active类。
在这里本文思路参考自这篇文章(Bootstrap 的导航栏如何切换 active_weixin_42038022的博客-CSDN博客),同时还添加了本人遇到的一些特殊情况。
问题:
这里以Bootstrap官网提供的代码(部分)为例:
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
实现用户点击对应li,动态添加和移除active类。
思路:通过获取当前页面的URL与a标签的href进行遍历比较,如果相同则添加active类,否则删除。
// 导航栏点击触发active
$(document).ready(function () {
// 遍历li标签,从而获取下面a标签的href,这里为了方便说明选用的是.nav类,在实际应用中可以使用id代替
$('.nav').find('li').each(function () {
var a = $(this).find('a:first')[0];
// 判断a标签的href是否与当前页面的路径相同
if ($(a).attr("href") === location.pathname) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
})
})
使用上述代码虽然解决了点击对应Link实现激活状态的问题,但是对于dropdown下拉框的情况则无法实现激活状态,原因是我在dropdown下拉框中的li标签设置了href,而dropdown下拉框本身的href为“#”,所以不会出现激活状态。
因此本人还是按照该博主的思路添加了如下代码:
// 导航栏点击触发active
$(document).ready(function () {
// 遍历li标签,从而获取下面a标签的href,这里为了方便说明选用的是.nav类,在实际应用中可以使用id代替
$('.nav').find('li').each(function () {
var a = $(this).find('a:first')[0];
// 判断a标签的href是否与当前页面的路径相同
if ($(a).attr("href") === location.pathname) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
})
// 处理dropdown的情况,这里为了方便说明选用的是.dropdown-menu类,在实际应用中可以使用id代替
$('.dropdown-menu').find('li').each(function () {
var classname = $(this).attr('class');
if (classname === 'active') {
$('.dropdown-menu').addClass('active');
}
})
})
通过上述代码,既可以实现点击对应Link使其处于激活状态,也保证点击dropdown下拉框时,也使其处于激活状态。