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

时间:2012-02-11 15:15:20

标签: jquery

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

我目前的尝试方式是:

   <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;
}

由于

2 个答案:

答案 0 :(得分:0)

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添加到类名集(如果它尚不存在)。以前的课程不会被删除。

答案 1 :(得分:0)

对于li上的点击事件。

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