javascript - 有没有办法突出书签的目标？ (www.site.com/page.htm#bookmark)？

Question

我想链接到页面上的书签 (mysite.com/mypage.htm#bookmark) 并直观地突出显示已添加书签的元素(可能有红色边框)。自然地，会有多个元素被加入书签。因此，如果有人点击 #bookmark2，那么 那个 其他区域将被突出显示)。

我可以看到如何用 .asp 或 .aspx 做到这一点，但我想做得比这更简单。我想也许有一种聪明的方法可以用 CSS 来做到这一点。

我为什么感兴趣:- 我想让我们的程序链接到一个列出所有程序的购物页面。我正在使用书签，因此他们会跳转到特定的程序区域 (site.com/shoppingpage#Programx)，但只是为了使其显而易见，我实际上想突出显示链接到的页面.

Answer 1

在你的css中你需要定义

a.highlight {border:1px solid red;}

或类似的东西

然后使用 jQuery，

$(document).ready ( function () { //Work as soon as the DOM is ready for parsing
    var id  = location.hash.substr(1); //Get the word after the hash from the url
    if (id) $('#'+id).addClass('highlight'); // add class highlight to element whose id is the word after the hash
});

要突出显示鼠标悬停的目标，还要添加:

$("a[href^='#']")
    .mouseover(function() {
        var id  = $(this).attr('href').substr(1);
        $('#'+id).addClass('highlight');
    })
    .mouseout(function() {
        var id  = $(this).attr('href').substr(1);
        $('#'+id).removeClass('highlight');
    });