Question

我直截了当地遇到了一些麻烦。基本上，我想将.active添加到导航栏中指向当前页面的链接。导航中的链接具有以下模式：

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

此处.nav-link应扩展为.active：nav-link active。

然后我有下列模式的下拉菜单：

<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-link和.dropdown-item都应该.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>

更新：我终于正确.dropdown-item - 正在添加.active。我相信这不是最有效的方式;有其他选择吗？

Bootstrap 4：在Navbar中动态添加.active

0 个答案: