锚点和哈希值问题

Question

我有以下代码:

<ul class="questions">
<li><a href="#test1">test1</a></li>
<li><a href="#test2">test2</a></li>
<li><a href="#test3">test3</a></li>
</ul>


<div id="test1">test1 text</div>
<div id="test2">test2 text</div>
<div id="test3">test3 text</div>

我使用此脚本在同一页面中突出显示想要的id锚点:

<script type="text/javascript">

$(document).ready(function() {

    $(function() 
    {
        $('a').click(function(event) {

           $(location.hash).css("background-color","red");


        });
    });

});
</script>

锚移动有效但所选id的高亮不起作用,除非我在第一次加载页面后刷新页面,当我点击另一个链接时当前高亮显示不会分散

Answer 1

$(function() {});

是一个快捷方式

$(document).ready(function(){})

所以,正如亚历山大所说,你不需要两者.

如果突出显示不起作用,您可以尝试:

$(function() {
    $('a').click(function(event) {
       $($(this).attr("href")).css("background-color","red");
    });
});

因为您不能依赖点击事件后更改的位置.有一些jQuery插件允许将事件添加到"on hash change",如果你经常使用它,这可能是一个解决方案.

编辑:当您单击另一个链接时,当前突出显示不会消失是正常的.

$(function() {
    $(location.hash).addClass("red");
    $('a').click(function(event) {
       $(".red").removeClass("red")
       $($(this).attr("href")).addClass("red");
    });
});

.red { background: red; }