我正在开发一个单页网站,当用户从一个菜单项滚动或点击到另一个菜单项时,我希望我的菜单项突出显示。
我目前的尝试方式是:
<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;
}
由于
答案 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');
});
});