我想在我的导航中添加一些类

Question

我将.selected用于topnav，.active用于子导航

<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav uppercase col-md-10">
    <li class="dropdown dropdown-fw open selected">
        <a href="javascript:;"><i class="icon-home"></i> Dashboard</a>
        <ul class="dropdown-menu dropdown-menu-fw">
            <li class="active"><a href="http://www.example.com/dashboard">Dashboard</a></li>
        </ul>
    </li>
    <li class="dropdown dropdown-fw">
        <a href="javascript:;"><i class="icon-puzzle"></i>example</a>
        <ul class="dropdown-menu dropdown-menu-fw">
            <li class="disabled"><a href="#">example1</a></li>
            <li><a href="http://www.example.com/2">example2</a></li>
            <li class="disabled"><a href="#">Sexample3</a></li>
            <li><a href="http://www.example.com/4">example4</a></li>
        </ul>
    </li>
</ul>

我想要的是当我单击并重定向到另一个页面时，我希望 JavaScript 检测页面的 URL 并激活导航栏中的链接，该链接包含与 URL 相同的 href 值 + 将所选类添加到.dropdown-menu-fw的父级

var url = window.location;
console.log(url);
$('.dropdown-menu-fw li a[href="'+ url +'"]').parent().addClass('active');
$('.dropdown-menu-fw li a').filter(function() {
return this.href == url;
}).parent().addClass('active');

Answer 1

也许你的意思是 var url = window.location.href;而不是.location？这样就可以检索整个 URL。

.location检索对象。

Answer 2

这对

我有用

$(document).ready(function(){
var url = window.location.href;
$('.dropdown-menu-fw li').removeClass('active');
$('.dropdown-menu-fw li a').filter(function() {
    return this.href == url;
}).parent().addClass('active');
$('.dropdown-fw').removeClass('selected open');
$('.dropdown-menu-fw li a[href="'+ url+'"]').closest(".dropdown-fw").addClass('open selected');
// $('.dropdown-menu-fw li a').parentsUntil(".dropdown-fw").addClass('open');
});