JQuery URL 事件监听器答案

【问题标题】：JQuery URL Event ListenersJQuery URL 事件监听器
【发布时间】：2010-10-23 02:22:03
【问题描述】：

我正在尝试让 JQuery 根据链接 ID 选择器突出显示一个元素

举例

<a href="#thisid">Goto Element with ID name</a>

突出显示下面的元素。

<div id="thisid" class="isNowHighlighted">FooIsCoolButNotBetterThenBar</div>

我尝试搜索相关插件，但没有任何乐趣。有什么想法吗？

【问题讨论】：

标签： javascript jquery html events listener

【解决方案1】：

所以你只想添加一个类？

jQuery('a[href^=#]').click(function(){
    var id = this.hash.replace('#','');
    $('#' + id).addClass('isNowHighlighted');
});

编辑：

回复您的评论；当页面加载时你也可以这样做：

$(document).ready(function(){
    if (window.location.hash) {
        $('#' + window.location.hash.replace('#','')).addClass('isNowHighlighted');
    }
});

【讨论】：

我认为这会起作用（大多数情况下），但是如果没有点击链接怎么办。如果文档加载了 /page/#thisid

【解决方案2】：

由于#thisId 不是锚，它有点毫无意义，所以我会这样做：

<a data-highlight="thisid" href="#">Goto ..</a>

$('a[data-highlight]').click(function(event){
    $('#' + $(this).data('highlight')).addClass('isNowHighlighted');
    event.preventDefault();
});

【讨论】：

为什么#thisid 需要成为锚？为什么要创建无效属性？有点突兀！
不需要是锚点，但没有任何意义。我认为具有显式属性更容易阅读/理解。我没有看到任何突兀的地方。我将为您编辑一种不那么“突兀”的方式；）
相信我 JimmyP，女士们喜欢它