jquery翻转和活动状态

2023年7月2日 185次阅读

我为任何愚蠢的问题/编码道歉,我对
jquery很新！

我正在尝试为具有翻转和活动状态的单页网站创建菜单. HTML：

<ul id="menu">
<li><a class="rollover" href="#"><img class="folio" src="images/folio3.png" /></a></li>
<li><a class="rollover" href="#"><img class="services" src="images/services3.png" /></a></li>
<li><a class="rollover" href="#"><img class="about" src="images/about3.png" /></a></li>
<li><a class="rollover" href="#"><img class="contact" src="images/contact3.png" /></a></li>
</ul>

jQuery的：

$(document).ready(function(){   
$("a.rollover").fadeTo(1,0.5);
$("a.rollover").hover(
        function() {$(this).fadeTo("fast",1);},
        function() {$(this).fadeTo("fast",0.5);});
$("a.rollover").click(function(){
if($(".active").length) {
    if($(this).hasClass("active")) {
    $(this).removeClass("active");
    $(this).fadeTo("fast",0.5);
    } else {
    $(".active").fadeTo("fast",0.5);
    $(".active").removeClass("active");
    $(this).addClass("active"); 
    $(this).fadeTo("fast",1);
    }
} else {    
    $(this).addClass("active");
    $(this).fadeTo("fast",1);
    }});
});

所以这里有两个问题：

>即使活跃的课程是
在Chrome的开发者中添加了
工具我可以看到不透明度
活动类是“1”,它不是
似乎在浏览器中工作,即.该
不透明度仍会出现在浏览器中
为“0.5”.
>如果$(this)处于活动状态,即使在此之后
点击$(this)从而删除
活跃的类,不透明度仍然存在
“1”.如果我点击$(this)几个
时代,最终不透明
改回“0.5”.

我非常感谢你的帮助.我一直在努力争取这个……现在3天嘿： – /

提前谢谢了…

最佳答案 我认为这应该做你想做的事情

$(document).ready(function(){   
    $("a.rollover").fadeTo(1,0.5);
    $("a.rollover").hover(function(){
        $(this).fadeTo("fast",1);
    },function(){
        if(!$(this).hasClass('active'))
        {
            $(this).fadeTo("fast",0.5);
        }
    });
    $("a.rollover").click(function(){
        if($('.active').length > 0)
        {                
            if($(this).hasClass('active'))
            {
                $(this).removeClass("active");
                $(this).fadeTo("fast",0.5);
            }
            else
            {
                $(".active").fadeTo("fast",0.5);
                $(".active").removeClass("active");
                $(this).addClass("active");
                $(this).fadeTo("fast",1);
            }
        }
        else
        {
            $(this).addClass("active");
            $(this).fadeTo("fast",1);
        }
        return false;
    });
});
点赞