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是用来控制切换方式的：

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

 
 


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

 
 
 

效果图如下：

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