jQuery вкладки скрывать/показывать панели плюс изменение фона вкладки

Question

Я пробовал все, что знаю (не так много, поскольку я новичок в javascript/jquery).

У меня есть две кнопки A и B. Каждая кнопка при нажатии показывает/скрывает (переключает) соответствующий B-контент. Только одна кнопка может иметь нажатое состояние за раз, и отображается содержимое, поэтому, если кнопка B и ее содержимое активны, если я нажимаю 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]); }); 

    } 
}); 

Весело ...

Edit:

отмечают, что - массив (textim) ключ должен быть установлен на том же идентификатор кнопки вы хотите вызвать.