Question

我正在开发一个单页网站，当用户从一个菜单项滚动或点击到另一个菜单项时，我希望我的菜单项突出显示。

我目前的尝试方式是：

   <nav>
    <div class="menu">
        <ul>
           <li><a href="#about">About</a></li>
           <li><a href="#what">What I Do</a></li>
           <li><a href="#work">Work</a></li>
           <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
   </nav>

我正在尝试这个jQuery，但它似乎没有激活css中的.selected？

 $(function(){
       var path = location.pathname.substring(1);
       if ( path )
             $('nav a[href$="' + path + '"]').attr('class', 'selected');
  });

css

.selected {
   color: #f9b950;
   font-weight: bold;
}

由于

Answer 1

location.pathname不包含哈希值。您必须改为使用location.hash 另外，不要忘记从前一个元素中删除selected类。

[href="value"]选择器将选择元素的确切属性值。它不会选择已解析的URI。这就是为什么你可以使用a[href="#hashhere"]代替a[href$="#hashere"]。

hashchange事件可用于检测#中的更改。

function doSomethingWithHash() {
   var path = location.hash;
   var as = $('nav a[href="' + path + '"]');
   if (as.length) {
       $('.selected').removeClass('selected');
       as.attr('class', 'selected'); // not .addClass('selected'); //?
   }
}
$(doSomethingWithHash); // = document.ready
$(window).bind('hashchange', doSomethingWithHash); // When navigating

这不会导致问题，但你必须考虑它：

.attr('class', 'selected')删除所有以前的类，并将class设置为selected。
.addClass('selected')将selected添加到类名集（如果它尚不存在）。以前的课程不会被删除。

Answer 2

对于li上的点击事件。

$(function(){
    $('.menu li').click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
    });
});

在单页网站上自动选择导航

2 个答案: