基於jQuery的tab標籤頁外掛
html檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab標籤頁</title>
<script src="js/jquery.js"></script>
<script src="jquery.tab.1.0.js"></script>
<style>
*{margin: 0;padding: 0;}
#box
{
margin: 100px auto;
}
#box1
{
margin:0 auto;
height: 30px;
width: 300px;
}
#box1 li.current
{
background: greenyellow;
}
#box1 li
{
float: left;
list-style: none;
text-align: center;
width: 32.6%;
height: 28px;
line-height: 28px;
text-align: center;
border: 1px solid black;
border-bottom: none;
cursor: pointer;
}
#box2
{
height: 100px;
width: 297px;
margin: 0 auto;
border: 1px solid black;
}
#box2 div
{
float: left;
list-style: none;
text-align: center;
width: 33.3%;
height: 30px;
text-align: center;
display: none;
}
#box2 div.dis
{
display: block;
}
</style>
</head>
<body>
<div id="box">
<div id="box1">
<li class="current">html</li>
<li>css</li>
<li>javascript</li>
</div>
<div id="box2">
<div style="display: block;">解釋html</div>
<div>解釋css</div>
<div>解釋js</div>
</div>
</div>
<script>
$('#box').tab(
{
eventType:'click'
}
).find('#box1 li').css('background','blueviolet');
</script>
</body>
</html>
js檔案
;(function($)//jquery外掛開發模板
{
$.fn.tab=function(options){
var defaults={
//各種引數，各種屬性
currentClass:'current',
box1Class:'#box1 li',
box2Class:'#box2 div',
eventType:'mouseover'
}
var options=$.extend(defaults,options);
this.each(function(){
//實現功能的程式碼
var _this=$(this);
_this.find(options.box1Class).bind(options.eventType,function(){
$(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);
var index=$(this).index();
_this.find(options.box2Class).eq(index).show().siblings().hide()
})
});
return this;
}
})(jQuery)