jQuery選項卡隱藏/顯示面板加選項卡背景更改

Question

我試過我所知道的一切（沒有太多，因爲我是與JavaScript/jquery新）。

我有兩個按鈕A和B每一個按鈕點擊時顯示/隱藏（切換）的相應的B含量。一次只有一個按鈕可以處於按下狀態，並顯示內容，所以如果B按鈕和它的內容在我點擊A時處於活動狀態，A按鈕將進入按下狀態，A內容顯示，B按鈕進入未按下狀態， B內容隱藏。 「按下狀態」是指不同的背景顏色。同樣如果只有A按鈕被按下並且它的內容可見，如果我再次按下它，A按鈕去未按下並且它的內容隱藏，對於B相同。

代碼低吼這是一團糟我想，我真的嘗試了一切，但JS和jQuery是不是我的事..

可有人告訴我如何使這項工作？謝謝你這麼多..

$(function() { 
       $('#login').click(function() { 
        $('.login').slideToggle('slow'); 
        $('#login').toggleClass('btn_on'); 
        $("#register:visible").toggleClass("btn_off"); 
        $('.register:visible').slideToggle('slow'); 

        return false; 
       }); 

       $('#register').click(function() { 
        $('.register').slideToggle('slow'); 
        $('#register').toggleClass('btn_on'); 
        $("#login:visible").toggleClass("btn_off"); 
        $('.login:visible').slideToggle('slow'); 
        return false; 
       }); 

      }); 

Answer 1

試試這個：jsfiddle

CSS：

.press 
{ 
background-color:green; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
} 
#input_text 
{ 
background-color:black; 
color:white; 
font-weight:bold; 
width:300px; 
height:100px; 
} 

HTML：

<input type='button' id='but_a' class='normal' value='button A' /> 
<input type='button' id='but_b' class='normal' value='button B' /> 

<br /> 
<br /> 
<div id='input_text'></div> 

的Jquery：

$('#input_text').hide() 

var textim = new Array(); 
    textim['but_a'] = 'button A text is now displayed'; 
    textim['but_b'] = 'button B text is now displayed'; 

$('.normal').click(function() { 
    if($(this).hasClass('press')) 
    { 
     $(this).removeClass('press'); 
     $('#input_text').slideUp('slow', function(){ $('#input_text').empty(); }); 
    } 
    else 
    { 
     $('.normal').removeClass('press'); 
     $(this).addClass('press'); 
      var idd = $(this).attr('id'); 
      $('#input_text').empty(); 
      $('#input_text').slideDown('slow', function() { $('#input_text').text(textim[idd]); }); 

    } 
}); 

玩得開心......

編輯：

注意 - 陣列（textim）關鍵的應設置爲你想要觸發按鈕相同的ID。