有没有办法突出显示书签的目标？ (www.site.com/page.htm#bookmark)？
时间：2020-03-05 18:50:47 来源:igfitidea点击:
我想链接到页面上的书签(mysite.com/mypage.htm#bookmark)，并在视觉上突出显示已添加书签的项目(可能带有红色边框)。自然地，会有多个带有书签的项目。因此，如果有人单击＃bookmark2，则该其他区域将突出显示)。
我可以看到如何使用.asp或者.aspx进行此操作，但我想比这更简单。我认为也许有一种使用CSS的聪明方法。
为什么我有兴趣：
我想让我们的程序链接到购物页面，该页面上列出所有程序。我使用的是书签，因此它们会跳转到特定的程序区域(site.com/shoppingpage#Programx)，但为了使其显而易见，我想突出显示要链接的页面。
解决方案
回答
我想我们是否可以将这些信息与JavaScript和cookie一起存储，以实现记住书签的功能，如果我们想与数据库进行交互，甚至可以添加一些Ajax。
CSS只能进行样式设置。我们必须给加了书签的锚定一个在CSS文件中找到的类。
CSS还具有a：visited选择器，用于对浏览器历史记录中的链接进行样式设置。
回答
使用我们最喜欢的JS工具箱向包含锚点(或者包含在锚点中)的项目添加"突出显示"(或者其他)类。
就像是：
jQuery(location.hash).addClass('highlight');
当然，我们需要调用该onready或者单击，如果希望它由页面上的其他链接触发，则需要定义.highlight类。我们还可以根据要突出显示的容器使jQuery选择器向上或者向下遍历。
回答
在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');
});
回答
我们还可以在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不支持目标伪类，因此，如果我们在此处寻求通用解决方案，可能还不够。
