tab滑动门

效果图:

html

<div id="tabs-01">
<div class="tabs-01-title">
<em class="tabs-01 tag-01">标题1</em>
<em class="tabs-01">标题2</em>
</div>
<div class="box">
<div class="content">1</div>
<div class="content hide">2</div>
</div>
</div>

css

#tabs-01{}
#tabs-01 .tabs-01-title{}
#tabs-01 .tabs-01{}
#tabs-01 .tag-01.tabs-01{}
#tabs-01 .box .content{}

js

<script type="text/javascript" src="http://www.eol.cn/js/common/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.eol.cn/js/common/plugin/tab.min.js"></script>
<script type="text/javascript">
$(function(){
// 左右切换 tabs-01
$('#tabs-01').eolTabs({
tabs:"tabs-01",
currentClass:"tag-01"
});
})
</script>

插件配置

1.拷贝对应html,css,js代码到页面中,js代码写在页面最底部
2.插件配置:

$('#tabs-01').eolTabs({
tabs:'tabs-01', //必填,标题基本样式为tabs-01
currentClass:'tag-01', //必填,标题选中样式为tag-01
content:'content', //主要内容样式为content
event:'mouseover', //主要内容样式为content
hoverClass:'tabs-01-hover', //当为click事件时,鼠标移到标题上的样式
start:1, //数字代表当前默认选中的标题
});

3.如果一个页面有多个tab切换,把对应的id,class的数字修改下,比如tabs-01改为tabs-02