jQuery实现Tab选项卡切换效果简单演示_jquery

起初我Html代码架子是这样的：

  
  

   
标签1
   
标签2
   
标签3
  
  
内容111111
  
内容222222
  
内容333333

后来换成了下面这个：

  

   标签1
   标签2
   标签3
  
  
内容1
  
内容2
  
内容3
 

之所以换成这个，是因为我觉得 dl dt dd 在页面布局中用的比 div ul li 要少，这样可以做到更好的隔离性。我们用js操作dl dt dd 对象，就会更少的影响到页面内其它元素，还有就是不用在li标签中自定义data-box属性，更符合页面书写标准。而且这个结构的整体感觉也比上面那个好。
插件的实现代码如下：

之所以说是轻量级，是因为代码量真的很少，也很简单。加了注释相信大家都可以看懂。

其中settings中的model是用来控制切换方式的：

• 当为"click"时，点击实现切换；
• 当为"mouseover"时，鼠标滑入实现切换。
  

开始时是想用hover来实现鼠标滑入切换的，结果发现，hover不支持bind绑定。因为hover是jquery通过封装 mouseover事件 的产物，它并不是一个正宗的事件，因此无法绑定。
下面给出个DEMO：

 
 


 
 

  

   标签1
   标签2
   标签3
  
  
鼠标滑入切换
  
内容2
  
内容3
 
 
 

  

   标签1
   标签2
   标签3
  
  
鼠标点击切换

  
内容2
  
内容3
 

 

效果图如下：

希望本文所述对大家学习jquery程序设计有所帮助。