(function($){
// tab 切换
$.fn.tabSwitch = function(options){
var defaults = {
eventType : "click", //事件类型
on : "on", // 导航 style
tabNav : ".tab_nav>li",//导航
tableContent : ".tab_content>div" // 切换内容
}
var options = $.extend(defaults,options);
this.each(function(){
var _this = $(this);
_this.find(options.tabNav).on(options.eventType,function(){
$(this).addClass(options.on).siblings().removeClass(options.on);
var index = $(this).index();
_this.find(options.tableContent).eq(index).show().siblings().hide();
})
})
return this;
}
})(jQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery-plugin.js" type="text/javascript"></script>
<script>
$(function(){
$(".tab").tabSwitch();
})
// 若大家想更改参数直接
$(".tab").tabSwitch({
on : "current"
});
</script>
<body>
<div class="tab" style="width:200px;">
<ul class="tab_nav" style="display: block; float: left;">
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<div class="tab_content" style="width:200px;" >
<div style="display:block;">html</div>
<div style="display:none;">css</div>
<div style="display:none;">js</div>
</div>
</div>
</body>
</html>
3565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
