Question

我想更改菜单链接属性（颜色）取决于哪个div在屏幕上聚焦。我在我的项目中使用了curtain.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)

我自己没试过但是试一试

更改菜单css类取决于url中的hash

3 个答案: