有没有办法突出显示书签的目标？（www.site.com/page.htm#bookmark）？

StackOverflow https://stackoverflow.com/questions/54237

  •  09-06-2019
  •  | 
  •  

题

我想链接到页面上的书签 (mysite.com/mypage.htm#bookmark) 并在视觉上突出显示已添加书签的项目（可能有红色边框）。当然，会有多个项目被添加书签。这样，如果有人点击#bookmark2，那么 那 其他区域将突出显示）。

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

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

有帮助吗？

解决方案

在你的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');
    });

其他提示

您还可以使用 target CSS 中的伪类：

<html>
<head>

<style type="text/css">
div#test:target {
 background-color: yellow;
}
</style>

</head>
<body>

<p><b><a href="#test">Link</a></b></p>

<div id="test">
Target
</div>

</body>
</html>

不幸的是，IE 或 Opera 不支持目标伪类，因此如果您正在寻找通用解决方案，这可能还不够。

使用您最喜欢的 JS 工具包将“突出显示”（或其他）类添加到包含（或包含在）锚点中的项目。

就像是：

jQuery(location.hash).addClass('highlight');

当然，如果您希望页面上的其他链接触发它，您需要调用 onready 或 click ，并且您需要定义 .highlight 类。您还可以根据要突出显示的容器使 jQuery 选择器向上或向下遍历。

我想您是否可以使用 JavaScript 和 cookies 来存储这些信息，以实现记住书签的功能，如果您想与数据库交互，甚至可以添加一些 Ajax。

CSS 只能进行样式设计。您必须为加书签的锚点提供在 CSS 文件中找到的类。

CSS 还具有 a:visited 选择器，用于设置浏览器历史记录中找到的链接的样式。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top