1

我对 jQuery 比较陌生，所以我真的不知道以下问题是否是由我看不到的非常琐碎的事情引起的。无论如何，我苦苦寻找答案，但一无所获。我希望你能帮帮我！

我一直在尝试编写一个简单的选项卡式菜单，以补充我的滑动内容。我希望标签有一些背景，这些背景会在悬停时淡入，并且活动类被删除并相应地添加到您单击的标签中。

这是我的淡化效果代码，使用 jQuery 颜色插件：

$('#menu a').not('.active').hover(function(){
        $(this).stop().animate({backgroundColor: '#FCEA77', 'opacity': '0.3'}, 'slow');
}, function() {
    $(this).stop().animate({backgroundColor: '#000000', color:'#ffffff', 'opacity': '1'}, 'slow');
});

这是活动类的代码：

$('a').click(function () {  
$(".active").removeClass("active");  
$(this).addClass("active");
});

两者都可以自行工作，但是当我尝试让它们同时工作时，会发生淡入淡出效果，并且当您单击另一个选项卡时，活动类将从当前类中删除，但是单击的选项卡没有得到活跃的班级。知道是什么原因造成的吗？如果它真的很容易和明显，我道歉。

哦，这是我的CSS：

#menu { padding: 10px 0 0 0;
    height: 25px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    position:relative;
}

#menu a{
    color:white;
    padding: 10px;
    text-decoration: none;
}

#menu a.active {
    color:black;
    background:#FCEA77;
}

和我的 HTML：

       <div id="menu">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#info">Info</a>
        <a href="#team">Team</a>
        <a href="#gallery">Gallery</a>
        </div>

非常感谢你！

4

4 回答 4

1

这是你想要的吗？

我看到的问题是.animate直接向标签添加样式，根据正常的 CSS 规则<a href>覆盖类中的任何样式。.active

最简单的解决方案是添加!important到active类样式中：

#menu a.active {
    color: black !important;
    background: #FCEA77 !important;
}​
于 2012-06-15T15:21:26.047 回答
0

试试这个 

    $('#menu a').hover(function(){
       if(!$(this).hasClass('active')) {
            $(this).stop().animate({'backgroundColor': '#FCEA77', 'opacity': '0.3'}, 'slow');
            }, function() {
              $(this).stop().animate({'backgroundColor': '#000000', 'color':'#ffffff', 'opacity':     '1'}, 'slow');
        }
     }

你也可以查看这个例子Demo

于 2012-06-15T15:06:40.230 回答
0

我现在看到了问题。Opacity 根本不需要引号，而其他 CSS 规则确实需要它。所以它是：

$('#menu a').not('.active').hover(function(){
    $(this).stop().animate({backgroundColor: '#FCEA77', opacity: 0.3}, 'slow');
}, function() {
    $(this).stop().animate({backgroundColor: '#000000', color:'#ffffff', opacity: 1}, 'slow');
});
于 2012-06-15T15:16:01.270 回答
0
  1. 从动画中的属性中删除所有单引号
  2. 使用.on('mouseenter', ...)and.on('mouseleave', ...)而不是.hover(...)，否则只有在文档就绪时不活动的元素才会被定位
  3. $(this).trigger('mouseleave');在click回调中放一个

这里的例子

于 2012-06-15T15:23:04.510 回答