有没有办法突出书签的目标？ （www.site.com/page.htm#bookmark）？
Posted
技术标签:
【中文标题】有没有办法突出书签的目标？ （www.site.com/page.htm#bookmark）？【英文标题】：Is there a way to highlight the target of a bookmark? (www.site.com/page.htm#bookmark)? 【发布时间】：2010-09-08 10:16:57 【问题描述】：我想链接到页面上的书签 (mysite.com/mypage.htm#bookmark) 并在视觉上突出显示已添加书签的项目（可能有红色边框）。自然地，会有多个项目被添加书签。因此，如果有人点击了#bookmark2，那么 that 其他区域将被突出显示）。
我可以看到如何使用 .asp 或 .aspx 来做到这一点，但我想做得比这更简单。我想也许有一个聪明的方法可以用 CSS 做到这一点。
我为什么感兴趣： - 我想让我们的程序链接到列出所有程序的购物页面。我正在使用书签，因此他们会跳转到特定的程序区域 (site.com/shoppingpage#Programx)，但只是为了使其明显我想真正突出显示链接到的页面.
【问题讨论】：
我不太确定你在问什么，也许你可以澄清一下？ 【参考方案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');
);
【讨论】：
这很好 - 您可能还想选择锚的父元素，而不是锚本身。 在现代 html 中，哈希应该指向 id 属性，而不是 name 属性。 感谢 Ryan 的提示，修复了代码以在 ids 而不是名称属性上工作，因此现在更简洁了。【参考方案2】：您也可以在 CSS 中使用 target 伪类：
<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 不支持目标伪类，因此如果您在这里寻找通用解决方案，这可能还不够。
【讨论】：
【参考方案3】：使用您最喜欢的 JS 工具包向包含（或包含在）锚点的项目添加“突出显示”（或其他）类。
类似：
jQuery(location.hash).addClass('highlight');
当然，如果您希望页面上的其他链接触发它，您需要调用它 onready 或单击，并且您需要定义 .highlight 类。您还可以根据要突出显示的容器使 jQuery 选择器向上或向下遍历。
【讨论】：
这不起作用，因为它试图找到具有哈希 ID 的元素，而不是具有 NAME 属性的锚。 samjudson，你不应该有带有 name 属性的锚。哈希锚应该指向现代 HTML 中的 id 属性。【参考方案4】：我猜你是否可以使用 javascript 和 cookie 存储这些信息，以实现记住书签的功能，如果你想与数据库交互，甚至可以添加一点 Ajax。
CSS 只能做样式。您必须为带有书签的锚点提供一个在您的 CSS 文件中找到的类。
CSS 还具有 a:visited 选择器，用于对浏览器历史记录中的链接进行样式设置。
【讨论】：
以上是关于有没有办法突出书签的目标？ （www.site.com/page.htm#bookmark）？的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法在 Visual Studio 2010 中突出显示当前活动的代码块？