用jquery封装一个tab切换
html结构:
<!--tabs示例-->
<div class="mytabs">
<!--选项卡区域-->
<ul class="tabs-menu">
<li class="tabsUnSeletedLi cur">选项1</li>
<li class="tabsUnSeletedLi">选项2</li>
<li class="tabsUnSeletedLi">选项3</li>
</ul>
<!--面板区域-->
<div class="tabs-content">
<div class="tabsDiv show">11111</div>
<div class="tabsDiv hide">22222</div>
<div class="tabsDiv hide">33333</div>
</div>
</div>
代码:
<script type="text/javascript">
/*
* @func tabs封装 放在公共js里面
* @desc 选项卡切换
* @param {Object} menu - document对象
* @param {Object} cont - 内容区容器
* @param {string} cur - 选择时状态类命名
*/
function tabs(menu,cont,cur){
menu.click(function() {
var index = menu.index(this);
$(this).addClass(cur).siblings().removeClass(cur);
cont.children().eq(index).fadeIn().siblings().hide();
});
}
/*单个js调用*/
$(document).ready(function() {
//tab切换
tabs($('.tabs-menu li'), $('.tabs-content'),'cur');
});
</script>