Javascript jQuery-更改样式和显示某些元素

看来我知道的Javascript足以伤害我自己，所以我来这里向你们寻求帮助。以下是我试图做的事情和我的问题

我有两张表格，根据用户的选择只填写一张。他们将单击一个按钮或另一个按钮。当他们点击按钮时，表单淡入，按钮改变类别（从亮按钮变为暗按钮），这就是我遇到的问题。首先，我根本无法让表单淡入，如果我点击两次而不是一次按钮，它们只会改变类别

还有一件事我不知道该怎么做，如果我说选择了表格1，但我想点击表格2，那么我希望表格1淡出，表格2淡入，按钮也相应地改变。这是我的密码：

JS

<script type="text/javascript">
var $j = jQuery.noConflict();
var $jtest1 = $j('#test1'); 
var $jtest2 = $j('#test2');

$j("#button1").live('click',function(){  
    //Fade out form if shown and fade in form selected
    $jtest2.fadeOut("slow", function(){
         $jtest1.fadeIn("slow");
    });
    $j('#button1').live('click', function(){
        //change class from light to dark
        $j(this).addClass('dark_button').removeClass('light_button');
    }); //I need to change this class to light if
        // button 2 is selected and change button 2 to dark
});
</script>

var$j=jQuery.noConflict（）；
var$jtest1=$j（“#test1”）；
var$jtest2=$j（“#test2”）；
$j（“#button1”）.live（'click'，function（）{
//淡出窗体（如果显示）并选择淡入窗体
$jtest2.淡出（“慢”，函数（）{
$jtest1.fadeIn（“慢”）；
});
$j（“#button1”）.live（'click'，function（）{
//把班级由亮改暗
$j（this）.addClass（'dark_按钮'）。removeClass（'light_按钮'）；
})；//如果需要，我需要将该类更改为light
//选择按钮2并将按钮2更改为黑色
});

HTML

<p class="light_button" id="button1">Test 1 </p>
<p class="light_button" id="button2">Test 2 </p>


<div class="hide" id="test1"><p>TEST</p></div>
<div class="hide" id="test2"><p>TEST 2</p></div>

Note: class="hide" is style="display:none"

测试1

测试2

试验

测试2

注意：class=“hide”是style=“display:none”

---

谢谢你的帮助，因为我是一个被困住了的人，不确定该怎么办。另外，请给我举个例子，因为当有人说“将此更改为那个”等时，我并不总是遵循。请查看下面的代码，并添加有关原因的注释

$j("#button1").live('click',function(){  
    //Fade out form if shown and fade in form selected
    $jtest2.fadeOut("slow", function(){
         $jtest1.fadeIn("slow");  
    });

    //The following is inside the click so I do not get added until the first click 
    //and added after every click so I multiply! 
    //Hence why it takes 2 clicks

    $j('#button1').live('click', function(){
        //change class from light to dark
        $j(this).addClass('dark_button').removeClass('light_button');
    }); //I need to change this class to light if
        // button 2 is selected and change button 2 to dark
});

你应该这样做

$j("#button1, #button2").live('click',
    function(){  

        //figure out what button was clicked. 
        if(this.id === "button1"){
            var btnA = $j(this);
            var btnB = $j("#button2");
            var divA = $j('#test1');
            var divB = $j('#test2');
        }
        else{
            btnA = $j(this);
            btnB = $j("#button1");
            divA = $j('#test2');
            divB = $j('#test1');
        }

        //make sure it is not already active, no use to show/hide when it is already set
        if(btnA.hasClass('dark_button')){
            return; 
        }

        //see if div is visible, if so hide, than show first div
        if(divB.is(":visible")){        
            divB.fadeOut("slow", function(){
                 divA.fadeIn("slow");
            });
        }
        else{//if already hidden, just show the first div
            divA.fadeIn("slow");            
        }

        //Add and remove classes to the buttons to switch state
        btnA.addClass('dark_button').removeClass('light_button');
        btnB.removeClass('dark_button').addClass('light_button');
    }    
);

---

您正在逐渐淡出。。。。你想淡出一个，那是个打字错误。我的代码是正确的，但在传输代码时，我复制了一个错误。我更正了它，希望你不介意，但是我编辑了你的问题来修正JS的缩进（没有修改任何实际代码）。现在我已经这样做了，我注意到您最初的点击处理程序在每次点击按钮时都会添加另一个点击处理程序-我怀疑这是您的意图。编辑您的帖子以使用淡出！：）我确实编辑了代码，表单一点也不褪色。关于第二个处理程序的分配方式，您是正确的，但“查看代码”并不是一个很好的答案-您可以让OP更清楚地了解这一点。您以前曾帮助过我一次，我需要修改您在这里给出的代码。你能帮助我吗？谢谢