2

有这样的布局：

http://jsfiddle.net/UuD73/27/

<div>
    navi 1<br>
<a href="#anchor1">Anchor 1</a><br/>
<a href="#anchor2">Anchor 2</a><br/>
<a href="#anchor3">Anchor 3</a><br/>
    navi 2<br>
<a href="#anchor1">Anchor 1</a><br/>
<a href="#anchor2">Anchor 2</a><br/>
<a href="#anchor3">Anchor 3</a><br/>
</div>

</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="anchor1" id="anchor1">Here is anchor 1</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="anchor2" id="anchor2">Here is anchor 2</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="anchor3" id="anchor3">Here is anchor 3</a>

​div{
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
}
a, a:active, a:visited{
    color: green;
}

带有 2 个相同的导航菜单，可跳转到页面中的锚点。是否可以在单击其中一个时为 2 个活动链接着色，最好只使用 CSS？

编辑：我更新了小提琴。我注意到我没有显示 2 个导航菜单

4

2 回答 2

4

我不知道它是否可能仅使用 css，但使用 jquery 你可以这样做。如果是这样，你想要吗？

你的 html

<div>
<a href="#anchor1">Anchor 1</a><br/>
<a href="#anchor2">Anchor 2</a><br/>
<a href="#anchor3">Anchor 3</a><br/>
</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="anchor1" id="anchor1">Here is anchor 1</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="anchor2" id="anchor2">Here is anchor 2</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="anchor3" id="anchor3">Here is anchor 3</a>

​

jQuery

$(function(){
    $('a').click(function(){
        $('a').css('color', 'green');
       var selector = $(this).attr('href');
        $(selector).css('color', 'black');
    });
});​

还有你的 CSS

div{
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
}
a, a:active, a:visited{
    color: green;
}
​

这里的工作示例@jsfiddle

于 2012-09-11T17:22:27.337 回答
2

我继续更新了 mattematico 的 jsFiddle

  1. :active 伪类的样式可以在单击锚点时看到，但在释放时会消失。
  2. 简化 mattematico 的脚本以使用 addClass/removeClass 正确切换颜色。
  3. 在样式表中添加了一个 .activeLink 类。

编辑

更新小提琴

$(function() { 
    // selector for any anchor with an href that begins with '#'.
    var bookmarkSelector = 'a[href^="#"]';
    $(bookmarkSelector).click(function(){ 
        $(bookmarkSelector).removeClass('activeLink'); 
        $('a[href="' + $(this).attr('href') + '"]').addClass('activeLink'); 
    });
});​
  1. 更新了选择器，以便 Click 功能仅适用于书签锚。
  2. 添加了指向 stackoverflow 的链接和 js-alert 链接，以确保在这些情况下不会触发效果。
  3. 添加了返回此帖子的链接。
  4. 删除了 <br/> 标签。
于 2012-09-11T17:40:15.230 回答