Question

我有一个侧边栏菜单，我用于整个网站的导航，我希望能够动态地将活动类添加到相应的菜单项。我尝试过使用下面的代码，但它似乎没有做任何事情。

    var page = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
    $('ul li a[href="'+ page +'"]').parent().addClass('active');
    $('ul li a').filter(function() {
        return this.href == page;
    }).parent().addClass('active');

我的选择器语法可能有问题所以下面我已经包含了侧栏的一个片段。

    <div id="sidebar" class="nav-collapse ">
        <ul class="sidebar-menu" id="nav-accordion">
            <li>
                <a href="dash.php">
                    <i class="fa fa-dashboard"></i>
                    <span>Home</span>
                </a>
            </li>

            <li class="sub-menu">
                <a href="javascript:;" >
                    <i class="fa fa-cogs"></i>
                    <span>Tools</span>
                </a>
                <ul class="sub">
                    <li><a href="index.php">Uptime</a></li>
                </ul>
            </li>
        </ul>
    </div>

Answer 1

我建议最简单的方法是过滤<a>元素的集合，以查看哪个href属性等于当前页面，然后将'active'类名添加到最近的祖先<li>元素：

// caching the URL of the page:
var pageURL = document.location.href;

// selecting all <a> elements within the element with the
// id of 'nav-accordion'; then using the filter() method
// to filter the collection returned by the selector:
$('#nav-accordion a').filter(function (index, anchorEl) {

    // only those elements for which this assessment returns
    // Boolean true will be retained.
    // here we test that the 'href' property (not the attribute),
    // which is an absolute URL, is equal the current page's URL:
    return anchorEl.href === pageURL;

// for those elements remaining in the collection we navigate to
// each retained element's closest ancestor '<li>' element and
// and then add the 'active' class-name to that <li>:
}).closest('li').addClass('active');

参考文献：

JavaScript的：
- document.location。
- URLUtils.href。
jQuery的：
- addClass()。
- closest()。
- filter()。

Answer 2

window.location不会返回字符串。如果您打开浏览器的开发人员工具并进行检查，您将看到它是一个对象。不确定您之后有什么价值，但我认为您会从pathname属性开始，例如var path = window.location.pathname;，然后在必要时使用一些正则表达式来获取页面名称。

Answer 3

试试这个

$( "#sidebar" ).on('click', function() {
$(this).addClass('active').siblings().removeClass('active');
});

我希望这会有所帮助

jQuery - 将活动类添加到菜单中的子菜单

3 个答案: