4

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

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

为什么我感兴趣： - 我想让我们的程序链接到列出所有程序的购物页面。我正在使用书签，因此他们会跳转到特定的程序区域（site.com/shoppingpage#Programx），但为了清楚起见，我想实际突出显示链接到的页面。

4

4 回答 4

9

在您的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');
    });
于 2008-09-10T15:09:37.967 回答
6

您还可以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 不支持目标伪类，因此如果您在这里寻找通用解决方案，这可能还不够。

于 2008-09-11T00:05:47.833 回答
2

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

就像是：

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

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

于 2008-09-10T14:54:21.153 回答
0

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

CSS 只能做样式。您必须为带有书签的锚点提供一个在您的 CSS 文件中找到的类。

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

于 2008-09-10T14:47:29.643 回答