jquery - 散列 div 上的 jquery 事件

Question

我有一个包含很多 div 的页面，我想使用 #DIV_NAME 将用户引导到某个 div 并突出显示该 div。

我用 JQUERY 试过了

    var hasih = window.location.hash.substring(1);
    $('div#'+hasih).addClass("div_highlight");

它只有在我加载页面一次然后刷新时才有效。

我怎样才能让它在第一次加载页面时工作？

tnx

Answer 1

附带说明一下，您可以仅在 css 中实现此效果，而无需 javascript。

CSS 3 引入了新的:target伪类^{[更多信息]}。

当 URL 中的哈希值和元素的 id 相同时，CSS 中的 :target 伪选择器匹配。

这是一个简单的例子（demo js fiddle）：

HTML

<a href="#first">first</a> - <a href="#second">second</a> - <a href="#third">third</a>

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>​

CSS

div{
    height: 50px;
    width: 50px;
    border: 1px solid black;            
}

div:target{
    border-color: red;
}

Answer 2

你可以这样做：

$('a').click(function(){
    var selector = $(this).attr('href');        
    $('html').animate({
        scrollTop: $(selector).offset().top
    }, 500,'',function(){
        $(selector).effect("highlight", {}, 1000);                             
    });
    return false;
});

这是演示

不要忘记包含 jQuery UI

Answer 3

$(window).bind('load hashchange', function() {
    var hasih = window.location.hash.substring(1);
    $('div').removeClass('div_highlight');
    $('div#' + hasih).addClass("div_highlight");
});

---

只需在 url 之间切换

http://jsfiddle.net/KWTmm/show/#hash1

http://jsfiddle.net/KWTmm/show/#hash2