起初我Html代码架子是这样的：
后来换成了下面这个：
标签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程序设计有所帮助。
下载本文