jQuery 选项卡隐藏/显示面板以及选项卡背景更改

Question

我尝试了所有我知道的东西（不像我是 javascript/jquery 的新手）。

我有两个按钮 A 和 B。单击每个按钮时显示/隐藏（切换）A 各自的 B 内容。一次只能有一个按钮处于按下状态并显示其内容，因此，如果我单击 A 时 B 按钮及其内容处于活动状态，则 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。