Question

我正在使用Jekyll与Compass一起构建一个交互式原型。在我的一个包含中，我有一个侧边栏导航。活动类将应用于每个（li），具体取决于活动/当前URL。一切都很好，直到您将子菜单（ul）和各种（li＆gt; a）纳入子页面。我需要一些方法来保持父（li）的活动类，即使在访问该父级的子页面时也是如此。

HTML：

<ul id="sidebar">
    <li><a href="pages/group1/somepage1.html">Item 1</a></li>
    <li><a href="pages/group2/somepage2.html">Item 2</a></li>
    <li class="active"><a href="pages/group3/somepage3.html">Item 3</a>
        <ul class="sub-menu>
            <li><a href="pages/group3/somesubpage1.html">Subitem 1</li>
            <li><a href="pages/group3/somesubpage2.html">Subitem 2</li>
            <li><a href="pages/group3/somesubpage3.html">Subitem 3</li>
        </ul>
    </li>
    <li><a href="pages/group4/somepage4.html">Item 4</a></li>
</ul>

文件夹结构：

页
- 组别1
  - somepage1.html
- 组2
  - somepage2.html
- 组3
  - somepage3.html
  - somesubpage1.html
  - somesubpage2.html
  - somesubpage3.html
- 第4组
  - somepage4.html

目标：

当我访问每个子菜单项时，我希望名为“active”的类保留在父（li）上。

我尝试了什么：

$(function(){

    var url = window.location.pathname, 
        urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
        // now grab every link from the navigation
        $('#sidebar >li a').each(function(){
            // and test its normalized href against the url pathname regexp
            if(urlRegExp.test(this.href.replace(/\/$/,''))){
                $(this).parent().addClass('active');
            }
        });

});

$(document).ready(function(){  
    $('#sidebar li ul.sub-menu li a').click(function(e){
        if ($(this).attr('class') != 'active'){
            $('#sidebar li a').removeClass('active');
            $(this).addClass('active');
        }
    });
    $('a').filter(function(){
        return this.href === window.location.href;
    }).addClass('active')
    $("ul.sub-menu > li > a").each(function () {
        var currentURL = window.location.href;
        var thisURL = $(this).attr("href");
        if (currentURL.indexOf(thisURL) != -1) {
            $(this).parents("ul.sub-menu").css('display', 'block');
        }
    });
    $('#sidebar > li > a').each(function(){
        var currURL = window.location.href;
        var myHref= $(this).attr('href');
        if (currURL.match(myHref)) {
            $(this).addClass('active');
            $(this).parent().find("ul.sub-menu").css('display', 'block');
        }
    });
});

Answer 1

如果你想通过JS实现这一点，我会遍历导航中的每个锚标记，一旦你找到与链接的href地址匹配的当前页面URI匹配，链接的父级li，并将.active分配给最后一个（应该是顶级li）。

var uri = window.location.pathname.substr(1);
$('#sidebar a').each(function() {
  if ($(this).attr('href') == uri) {
    $parents = $(this).parents('li').last().addClass('active');
  }
});

带子菜单的垂直导航，在访问子页面时将活动类保留在父列表项上

1 个答案: