显示部分 onclick [关闭]答案

【问题标题】：Show section onclick [closed]显示部分 onclick [关闭]
【发布时间】：2013-12-30 09:36:45
【问题描述】：

HTML

<section id="one">

<form>
<input type=text />
<button id=btn>Go</button>
</form>

</section>

<section id="two" >
<h1>Hi</h1>
</section>

我有上面的 html，它有两个部分。我试图隐藏 ID 为 "two" 的部分，隐藏并显示部分 "one"。当我点击 go 按钮时，部分 one 应该淡出和部分“ two" 应该会显示出来。

有人可以帮我为此编写 jquery 代码吗？

我是 jquery 的新手。这会很有帮助。

请不要问我尝试了什么，我对 javascript 和 html 也比较陌生，我想知道如何做到这一点

【问题讨论】：

【解决方案1】：

试试这个

HTML

<section id="one">
 <input type=text />
 <button id=btn>Go</button>
</section>

<section id="two" style="display:none">
 <h1>Hi</h1>
</section>

JQuery 脚本

$('#btn').on('click', function(){
 $('#one').hide('slow')
 $('#two').show('slow');
});

【讨论】：

【解决方案2】：

$('#btn').click(function(){
 $('#two').hide(1000);
  $('#one').show(1000);
})

【讨论】：

【解决方案3】：

看看Working Demo

$('#btn').on('click', function () {
   $('#one').hide();
   $('#two').fadeIn();
});

【讨论】：

【解决方案4】：

    $(document).ready(function(){
    $('#btn').on('click', function() {
    $('#two').fadeIn();
    $('#one').hide();
    });  

     });

【讨论】：

【解决方案5】：

根据您的要求，第 1 部分使用 .fadeOut()，第 2 部分使用 .fadeIn()。

$('#btn').on('click', function() {
    $('#one').fadeOut();
    $('#two').fadeIn();
});

【讨论】：