Cla*_*ols 2 javascript css jquery
我想链接到页面上的书签(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不支持目标伪类,所以如果你在这里寻找通用解决方案,这可能还不够.