雨夜带刀

最近的项目用到TAB效果的地方较多，于是自己稍微封装了下，写成了jQuery插件，方便以后使用，顺便重温下jQuery插件的实现机制。

在写插件之前对常见的TAB效果做了下总结，大体上也就那几种效果。插件力求简单易用，只要能实现常见的功能即可。

参数说明：

• event
• 触发TAB的事件类型，鼠标悬停：mouseover，鼠标点击：click，默认为mouseover。
• timeout
• 事件延迟，单位为毫秒，默认为0。
• auto
• 自动切换，单位为毫秒，默认为0。
• callback
• 回调函数，触发TAB时执行，函数的参数返回的是this。

HTML结构部分：

<div id="box">
    <!-- TAB菜单部分 -->

    <ul class="tab_menu">

        <li class="current">新闻</li>


        <li>图片</li>


        <li>军事</li>

    </ul>


    <!-- TAB内容部分 -->

    <div class="tab_box">

        <div>新闻</div>


        <div class="hide">图片</div>


        <div class="hide">军事</div>
    </div>
</div>

CSS样式部分：

.tab_menu{
	list-style:none;
	width:210px;
	overflow:hidden;
}
.tab_menu li{
	width:70px;height:30px;
	line-height:30px;
	float:left;
	color:#fff;
	background:#093;
	text-align:center;
	cursor:pointer;
}
.tab_menu li.current{
	color:#333;
	background:#fff;
} /*TAB菜单高亮样式*/
.tab_box{
	padding:20px;
	height:120px;
}
.tab_box .hide{
	display:none;
} /*隐藏TAB内容部分*/

调用插件：

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $('#box').Tabs({
    event:'mouseover',  //事件类型
    timeout:100,  //设置事件延迟
    auto:3000,  //3秒自动切换一次
    callback:null  //回调函数
  });  //返回了this
});
</script>

7月5日更新，优化插件源码，解决几个小BUG，插件下载地址：https://blog.yiguochen.com/wp-content/uploads/download/jquery.tabs.zip