改变活动类的背景颜色

问题描述：

我有2个可以打开两个不同div的clickeable类。改变活动类的背景颜色

我试图让活动类保持悬停的背景，只要它的开放。

尝试了一个跨度，但没有成功。任何提示？我创建了一个捣鼓节目http://jsfiddle.net/Qskxa/12/

jQuery代码

jQuery(document).ready(function() { 
    jQuery('.toggle_hide').hide(); 

    jQuery("#artistsbox li span").css('cursor', 'pointer').click(function() { 
     var $this = $(this); 
     $this.next("div").fadeToggle(200); 
     $('.toggle_hide').not($this.next("div")).fadeOut(800); 
    }); 
});

答

试试这个（http://jsfiddle.net/Qskxa/14/）：

jQuery(document).ready(function() { 
    jQuery('.toggle_hide').hide(); 

    jQuery("#artistsbox li span").css('cursor', 'pointer').click(function() { 
     $('#artistsbox li span.active').removeClass('active'); 
     var $this = $(this); 
     if($this.next("div").is(":hidden()")) $this.addClass('active'); 
     $this.next("div").fadeToggle(200); 
     $('.toggle_hide').not($this.next("div")).fadeOut(800); 
    }); 
});

注意，我改变了CSS，并且增加了活动类。

要命的解决方案更改CSS部分。万分感谢！ – Dymond 2013-04-09 10:05:37

我用它作为答案，因为它没有活动的类打开时无效。 – Dymond 2013-04-09 10:08:04

有关行为的一个小细节，如果您单击活动链接，它将关闭/淡出图像，但是一旦鼠标离开按钮，按钮就会保持活动状态。我期望如果我关闭图像并将鼠标移出，该按钮应该保持非活动状态。当前的解决方案可以通过考虑“如果我点击一个活动按钮会发生什么？”的情况进行修改。 – 2013-04-09 10:54:39

答

简单地创建新的CSS类活动：

#artistsbox li span.active, 
#artistsbox li span:hover{ 
background-color:#250109; 
    -webkit-transition: background 0.1s linear; 
     -moz-transition: background 0.1s linear; 
     -ms-transition: background 0.1s linear; 
     -o-transition: background 0.1s linear; 
     transition: background 0.1s linear; 

}

和更新您的点击功能，因此将会把点击的元素对类：

jQuery(document).ready(function() { 
    jQuery('.toggle_hide').hide(); 

    jQuery("#artistsbox li span").css('cursor', 'pointer').click(function() { 
     var $this = $(this);   
     $("#artistsbox li span").removeClass("active");//remove active class from any other element that could be clicked previously 
     $this.addClass("active"); 
     $this.next("div").fadeToggle(200); 
     $('.toggle_hide').not($this.next("div")).fadeOut(800); 
    }); 
});

Demo

像魅力一样工作。朋友，谢谢 – Dymond 2013-04-09 10:07:17

答

http://jsfiddle.net/Praveen16oct90/Qskxa/15/

注意我已经为每个跨度提供了id以便了解。

jQuery(document).ready(function() { 
jQuery('.toggle_hide').hide(); 

jQuery("#d1").css('cursor', 'pointer').click(function() { 
    var $this = $(this); 
    $this.css("background-color","#250109"); 
    $("#d2").css("background-color"," #ffffec"); 
    $this.next("div").fadeToggle(200); 
    $('.toggle_hide').not($this.next("div")).fadeOut(800); 
}); 

jQuery("#d2").css('cursor', 'pointer').click(function() { 
    var $this = $(this); 
    $this.css("background-color","#250109"); 
    $("#d1").css("background-color"," #ffffec"); 
    $this.next("div").fadeToggle(200); 
    $('.toggle_hide').not($this.next("div")).fadeOut(800); 
});

}）;

答

试试这个 - http://jsfiddle.net/Qskxa/16/

jQuery(document).ready(function() { 
    jQuery('.toggle_hide').hide(); 

    jQuery("#artistsbox li span").css('cursor', 'pointer').click(function() { 
    var $this = $(this); 
    var hasClass = $this.hasClass('active'); 
    $("#artistsbox li span").removeClass('active'); 
    if(!hasClass) $this.addClass('active'); 
    $this.next("div").fadeToggle(200); 
    $('.toggle_hide').not($this.next("div")).fadeOut(800); 
    }); 
});

*注 - 下面

#artistsbox li span:hover, #artistsbox li span.active{ 
    background-color:#250109; 
    -webkit-transition: background 0.1s linear; 
    -moz-transition: background 0.1s linear; 
    -ms-transition: background 0.1s linear; 
    -o-transition: background 0.1s linear; 
    transition: background 0.1s linear; 
}

改变活动类的背景颜色

相关推荐