Question

我正在使用以下代码

<style>
    .navbar .nav a.current {color:#3598fe; }
</style>
<script type="text/javascript" charset="utf-8">
    //<![CDATA[
    jQuery(function() {
        jQuery('.primary-nav a').each(function() {
            if (jQuery(this).attr('href') === window.location.pathname) {
                jQuery(this).addClass('current');
            }
        });
    });
    //]]>
</script>

这部分正文

<ul class="nav pull-right">
    <li><a href="#Home">Home</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

有人可以帮助我使用正确的代码更改为活动超链接的颜色吗？

Answer 1

我建议：

$('ul.nav a').filter(function(){
    return $(this).attr('href') === window.location.hash;
}).addClass('current');

Proof-of-concept

参考文献：

Answer 2

没有必要使用jquery只是使用这个css

.nav a {}
.nav a:active {}

是的，我看到了他想要的东西，大卫托马斯解决方案似乎可以解决问题

Answer 3

如果您不想在jQuery中弄脏，可以使用这个选项。（我建议稍后找一个更好的选择，因为内联样式不是可行的方式）

<ul class="nav pull-right">
  <li><a class="nav navhome" href="#Home">Home</a></li>
  <li><a class="nav navcontact" href="#contact">Contact</a></li>
  <li><a class="nav navabout" href="#about">About</a></li>
</ul>

然后，您将在每个页面上添加一个内嵌样式，以表示您希望它改变的样式。

<style>
  .nav a.navhome {color:#ff7200; }
</style>

这会将当前页面的类更改为覆盖文本的颜色。

就像我之前说过的，这是一个解决方案，但我建议你学习一些jQuery，以便在以后的路上更流畅，更流畅。

更改当前页面菜单项的样式

3 个答案: