JQuery滚动状态和；“当前”；项目

我有一个简单的JQuery滚动。问题是，总是有一个“当前”项，我正在使用Jquery相应地更改该当前项。我正在使用.hover函数根据页面名称更改悬停颜色。现在，一切正常，除了当你滚动当前项目时，它会像其他导航项目一样失去“当前”颜色和空白。这是我试过的一张支票，但不起作用。基本上，检查项目是否没有颜色，如果没有，则运行滚动功能

我做错了什么？有没有更好的方法？谢谢

if (jQuery('.sub_navigation li a').css('color') != '#F37321') {
    jQuery(".sub_navigation li a").hover(function () {
        jQuery(this).css({'color' : '#F37321'});
    }, function () {
        var cssObj = {'color' : ''};
        jQuery(this).css(cssObj);
    });
} /*end if */

---

我的理解正确吗？你希望颜色在最新的元素上悬停？但如果再次悬停，是否未从当前元素中删除

尝试以下操作（使用.current类作为控件）

---

我会使用类而不是内联样式。然后，您可以添加和删除.hover类，而不必担心.current类会受到影响

<script>

  $(document).ready(function () {
    $(".sub_navigation li a").hover(
    function () { $(this).addClass('hover'); }
  , function () { $(this).removeClass('hover'); });
  });

</script>

<style>
  .hover {
    color: #F37321;
  }
  .current {
    color: #F37321;
  }
</style>

<ul class="sub_navigation">
  <li><a class="current">I am current</a></li>
  <li><a>I am not</a></li>
  <li><a>Neither am I</a></li>
</ul>

$（文档）.ready（函数（）{
$（“.sub_导航li a”）。悬停(
函数（）{$（this.addClass（'hover'）；}
，函数（）{$（this.removeClass（'hover'）；}）；
});
.悬停{
颜色：#F37321；
}
.当前{
颜色：#F37321；
}

我是最新的
我不是
我也不是

首先，

if

语句没有做您认为应该做的事情。您只测试第一个链接的颜色，而不测试其他任何内容

jQuery（'.sub\u navigation li a'）

选择所有

sub\u navigation

链接，并

.css

作用于该组中的第一项

第二，为什么要使用cssObj？虽然没有错，但是仅仅说

.css（{'color'：'''}）

似乎有很长的路要走

要做到你所要求的，你可以做几件事。一种方法是在当前链接上设置一个类并过滤掉：

jQuery(".sub_navigation li a :not('.current')").hover(function () {
         jQuery(this).css({'color' : '#F37321'});
}, function () {
         jQuery(this).css({'color' : ''});
}); 

另一种方法是将悬停样式设置为类：

jQuery(".sub_navigation li a").hover(function () {
         jQuery(this).addClass('hoverClass');
}, function () {
         jQuery(this).removeClass('hoverClass');
}); 

更新： 由于您已经指定使用Wordpress中的PHP脚本来设置当前页面链接的样式，那么您所需要的就是使用适当的导航颜色设置每个页面的样式。因此，您要做的是设置一个源脚本，该脚本只包含一些基本函数，其中包含一个带有所需颜色的hover jQuery脚本。像这样：

function redHover() {
  $('.subnavigation li a').hover(function() {
    $(this).toggleClass('red');
  });
}

function blueHover() {
  $('.subnavigation li a').hover(function() {
    $(this).toggleClass('blue');
  });
}

function greenHover() {
  $('.subnavigation li a').hover(function() {
    $(this).toggleClass('green');
  });
}

然后使用在函数中指定的类创建css文件：

.red {
  color: #FF0000;
}
.blue {
  color: #3366FF;
}
.green {
  color: #009900;
}

然后，只需在所需页面上指定所需的功能：

jQuery(document).ready(function($) {
  redHover(); //or
  blueHOver(); //or
  greenHover();
});

---

同意。虽然我会使用与hover不同的名称，因为不是每个人都用鼠标浏览；）谷歌还建议使用类。在他们的教程中了解更多：嗯，我尝试了这个，但遇到了一些麻烦。让我往后退一点。我首先使用JQuery悬停状态的一个原因是我在站点上有四个区域。每个区域都有自己的颜色用于滚动等，所以我在CSS中设置了基本颜色。加载特定页面后，我使用JQuery更改CSS颜色状态。当然，不能用JQuery更改a:hover，所以我必须使用这个函数。我正在使用Wordpress PHP函数来检测加载了哪个页面。Wordpress已经在li中添加了“当前”页面类，这使事情变得更方便。啊，我重新阅读了你的问题，现在我明白了你想要的是什么。如果你有一个链接或生活环境，你可以发布它吗？视觉示例可能有助于强化您的问题。谢谢大家。我还没有机会实现任何东西，因为客户端对我也发布的JQuery可伸缩背景问题感到非常不安。呃。这是其中的一周。我会发回，如果这是工作，虽然它看起来会。

jQuery(document).ready(function($) {
  redHover(); //or
  blueHOver(); //or
  greenHover();
});