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。