jquery - 更改菜单 css 类取决于 url 中的哈希

Question

我想更改菜单链接属性（颜色）取决于哪个 div 聚焦在屏幕上。我正在为我的项目使用窗帘.js，html 看起来像这样：

<div id="menu">
<a href="#section-1">link 1</a>
<a href="#section-2">link 2</a>
<a href="#section-3">link 3</a>
</div>
<ol class="curtains">
<li id="section-1" class="cover">
.....
</li>
<li id="section-2" class="cover">
.....
</li>
<li id="section-3" class="cover">
.....
</li>       
</ol>

这是一种页面布局，其中每个部分都将哈希传递给 url：如果 section-1 处于焦点位置，则 url 将为 xxx/index.html#section-1

有任何想法吗？

Answer 1

您可以使用哈希作为选择器通过 ID 定位活动元素，然后使用siblings()将其他 li 上的颜色设置回默认值：

$(window).on('hashchange', function() {
    $('a[href="'+document.location.hash+'"]').css('color', 'red')
                                             .siblings('a')
                                             .css('color', 'black');
}).trigger('hashchange');

编辑：

单击时更改链接上的颜色似乎更容易：

$('#menu a').on('click', function() {
    $(this).css('color', 'red').siblings('a').css('color', 'black');
})

Answer 2

使用 jQuery，您可以简单地这样做：

$(window).bind('hashchange', function (e){
 // do color change
});

Answer 3

使用 Jquery 你应该能够到达那里。首先获取哈希：

var hash = window.location.hash;

然后您可以将 css 类添加到您想要使用的任何元素：

$('a[href="' + hash + "]').addClass(hash)

自己没有尝试，但试一试