Question

我有一个简单的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 */

Answer 1

我会使用类而不是内联样式。然后，您可以添加和删除.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>

Answer 2

我是否正确理解您希望颜色是悬停在最新元素上的？但如果再次盘旋，则不会从当前元素中删除？

尝试类似的东西（使用.current类作为控件）

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

Answer 3

首先，if语句没有按照您的想法行事。您只测试第一个链接的颜色，而不是其他任何内容。 jQuery('.sub_navigation li a')选择所有sub_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');
});

Answer 4

UPDATE：

由于您已经指定在Wordpress中使用PHP脚本来设置当前页面链接的样式，因此您需要的是使用适当的导航颜色为每个页面设置样式。所以你想要做的是设置一个源脚本，它只包含一个基本函数，其中包含一个带有你想要颜色的悬停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();
});

JQuery翻转状态和“当前”项

4 个答案:

UPDATE：