jquery hasClass "active" on ul#navigation li on page load not working答案

【问题标题】：jquery hasClass "active" on ul#navigation li on page load not workingjquery hasClass "active" on ul#navigation li on page load not working
【发布时间】：2015-11-27 12:17:05
【问题描述】：

$(document).ready(function(){

$("li").click(function(){

    if ($(this).hasClass("active") )

          $(this).fadeTo("slow", 1.0); 

    });
});

我制作了一个导航栏，并正在使用此代码在悬停时添加透明效果：

$(document).ready(function(){
 $(".thumbs").fadeTo("slow", 0.6); 

 $(".thumbs").hover(function(){

    $(this).fadeTo("slow", 1.0); 

    },function(){

    $(this).fadeTo("slow", 0.4); 

    });

});

我也在使用 hoverIntent。

不透明度翻转很有效，但我希望我的“活动”页面具有 100% 的不透明度，但我似乎无法让它工作..我做错了什么？

问题 HTML 中的链接是：

<ul id="navigation">
  <li class="active"><a href="page.htm"></a></li>
</ul>

减去我的“活动”类，导航完美无缺，所以我认为我提供了所有必要的代码。

【问题讨论】：

你说什么不起作用？您在第一个 jquery 代码部分中的 fadeto？
抱歉，在悬停时淡入/淡出效果很好。我希望任何具有“活动”类的 LI 都具有 100% 的不透明度。我使用 php 来确定页面是什么，然后在 li.xml 中添加一个“活动”类。但是不透明度没有得到应用 - fadeTo 只在悬停时起作用吗？
也许您需要重新表述您的问题，因为没有人知道“活动”课程是什么，除非您展示它。所以你的问题是你申请的课程不起作用？
我的印象是上面的jquery： $(document).ready(function(){ $("li").click(function(){ if ($(this).hasClass ("active") ) $(this).fadeTo("slow", 1.0); }); });将查找任何具有“active”类的 LI 元素，然后应用 fadeTo("slow", 1.0);事件。这是正确的吗？

标签： jquery css html-lists

【解决方案1】：

您不需要 hasClass 测试。你可以换...

$("li").click(function(){
    if ($(this).hasClass("active") )
          $(this).fadeTo("slow", 1.0); 
    });
});

有了这个.....

$("li.active").click(function(){
    $(this).fadeTo("slow", 1.0); 
});

【讨论】：

【解决方案2】：

这里你可能想要.each()，而不是.click()，但你可以做到比这更简单:)

在页面加载时，您可以使用:not() selector：

$("li:not(.active)").fadeTo("slow", 0.6);

这只会淡出没有有class="active"的<li>

【讨论】：