Javascript 引导程序4：在导航栏中动态添加.active

我搞清楚这件事有些困难。 基本上，我想将

.active

添加到导航栏中指向当前页面的链接。 导航中的链接具有以下模式：

<li class="nav-item">
    <a class="nav-link" href="index.php?page=overview">Home</a>
</li>

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="index.php?page=1">Page 1</a>
        <a class="dropdown-item" href="index.php?page=2">Page 2</a>
    </div>
</li>

.nav链接

和

下拉项

都应扩展为

.active

---

这是我的密码：

<script type="text/javascript">
$(document).ready(function () {
    $('.nav-link[href="'+ url +'"]').filter(function() {
         return this.href == url;
    }).addClass('active');

    var dropdownId = $('a.dropdown-item').parent().prop('aria-labelledby');
    $('a.nav-link[id="' + dropdownId + '"]').addClass('active');
    $('a.dropdown-item').filter(function() {
         return this.href == url;
    }).addClass('active');
});
</script>

$（文档）.ready（函数（）{
$（'.nav-link[href=“'+url+''“]”）。筛选器（函数（）{
返回this.href==url；
}).addClass（“活动”）；
var dropdownId=$（'a.dropdown-item'）.parent（）.prop（'aria-labelledby'）；
$（'a.nav-link[id=“”+dropdownId+“]”）addClass（'active'）；
$（'a.dropdown-item'）.filter（函数（）{
返回this.href==url；
}).addClass（“活动”）；
});

更新：我终于得到了

。下拉项

右-

。正在添加活动的

。 我相信这不是最好的方式；还有其他选择吗