显示部分onclick [英] Show section onclick

问题描述

 < 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。当我点击转到一节一节应该消失，并且应该显示两节节。

有人可以帮我编写jQuery代码吗？

Im新增jquery.It会有帮助。

我在 http://jsfiddle.net/x8B8c/ 上有一个小提琴。

请不要问我已经尝试了什么，即时通讯更新鲜的JavaScript和HTML以及，我想知道如何做到这一点

解决方案

试试这个

HTML

 < section id =one> 
< input type = text /> 
< button id = btn> Go< / button> 
< / section> 
 
< section id =twostyle =display：none> 
< h1> Hi< / h1> 
< / section> 
  

JQuery Script

 < $（'＃btn'）。on（'click'，function（）{
 $（'＃one'）。hide（'slow'）
 $（'＃two '）.show（'slow'）; 
}）; 
  

DEMO

HTML

<section id="one">

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

</section>

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

I have the above html which has two sections.Im trying to hide the section with id "two" hide and show section "one".When i click on go button,section one should fade and section "two" should be shown.

Can some one help me code the jquery for this?

Im new to jquery.It would be helpful.

I have a fiddle at http://jsfiddle.net/x8B8c/

please dont ask what I have tried,im a fresher to javascript and html as well,I would like to know how this can be done

解决方案

Try this

HTML

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

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

JQuery Script

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

DEMO

这篇关于显示部分onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！