jQuery-tab切换

来源：互联网发布：apache 进程过多编辑：程序博客网时间：2024/05/20 05:55

(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>

阅读全文

0 0