菜鸟写jquery入门教程(for web前端开发群4)(04)

今天接着来写，不好意思，很久没来更新了。最近一直忙着感冒，今天稍稍好一点，只是非常咳嗽。可能是身体不太好吧，以至没有耐心继续讲哪些细枝末节的内容了。

来个例子吧，学过的知识足矣了，

好，哪么就来滑动门吧。

HTML 结构是这样的：

 <div id="xiaocainiao">

 <ul><li>选项卡01</li><li>选项卡02</li><li>选项卡03</li></ul> 

 <div>展示层01</div>

 <div>展示层02</div>

 <div>展示层03</div>

</div>

样式自己写吧。

原理是这样的，点击第几个选项卡，则对应的会触发两个动作

1、所有的展示层隐藏(display:none)

2、对应的展示层显示(display:block)

即，点击第一个选项卡，则(首先，隐藏所有的div；其次，显示第一个div)

好了，代码伺候！

1 得到所有选项卡:

  var tags = $('#xiaocainiao > ul > li');

2 得到所有展示层

  var shows = $('#xiaocainiao > div');

3 隐藏所有展示层，并显示想显示的哪一个，

 shows.hide();

 shows.eq(0).show(); //这里显示第一个

好，完成以上几步之后，开始功能性的代码书写了。需求是，点第一个tag，则隐藏所有，显示第一个show,点第二个tag，则隐藏所有，显示第二个

show 依此类推。

 写成代码就是这样，

 tags.eq(0).click(function(){//第一个选项卡被点击的时候

  shows.hide();//隐藏所有展示层

  shows.eq(0).show();//显示第一个展示层

 });

 

 综合成函数

 function kickTag (n){

  tags.eq(n).click(function(){

  shows.hide();

  shows.eq(n).show();

  });

 }

 

 好。我这这样写

 kickTag(0);

 kickTag(1);

 kickTag(2);

 搞定。

 但有时候假设选项卡有一百个，难道要写一百次？从kickTag(0)......写到.........kickTag(100);?

 所以这样写

 for(var i=0;i<tags.length;i++){

  kickTag(i);

 }
 

 至此，全部搞定。

 //----------------------------------------

 var tags = $('#xiaocainiao > ul > li');

  var shows = $('#xiaocainiao > div');

  shows.hide();

 shows.eq(0).show(); //这里显示第一个

 function kickTag (n){

  tags.eq(n).click(function(){

  shows.hide();

  shows.eq(n).show();

  });

 }

 for(var i=0;i<tags.length;i++){

  kickTag(i);

 }

 //------------------------------------

 所有代码如上，不过13行代码。简单吧。这就是jquery!