Bootstrap 给导航栏添加active

我们在使用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下拉框时，也使其处于激活状态。