改變活動類的背景顏色

我有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); 
    }); 
});

來源

2013-04-09 Dymond

試試這個（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，並且增加了活動類。

來源

2013-04-09 10:03:14 mrks

要命的解決方案更改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

來源

2013-04-09 10:03:28

像魅力一樣工作。朋友，謝謝 – 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); 
});

}）;

來源

2013-04-09 10:07:26 PraJen

試試這個 - 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; 
}

來源

2013-04-09 10:07:35

改變活動類的背景顏色

回答

相關問題