jquery扩展之tab切换
```
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 300px;
height: 400px;
float: left;
}
p{
width: 300px;
height: 50px;
background-color: #e1e1e1;
overflow: hidden;
}
span{
display: block;
text-align: center;
line-height: 48px;
width: 98px;
height: 48px;
float: left;
border:1px solid #ccc;
cursor: pointer;
}
ul{
list-style: none;
width: 300px;
height: 350px;
overflow: hidden;
}
li{
width: 298px;
height: 348px;
float: left;
border:1px solid #ccc;
text-align: center;
line-height: 350px;
font-size: 30px;
display: none;
}
.select{
background-color: red;
}
.show{
display: block;
}
</style>
</head>
<body>
<div id="box1">
<div class="box1">
<p>
<span class='select'>1</span>
<span>2</span>
<span>3</span>
</p>
<ul>
<li class="show">内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
</div>
<div id="box2">
<div class="box1">
<p>
<span class='select'>1</span>
<span>2</span>
<span>3</span>
</p>
<ul>
<li class="show">内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
$.fn.extend({
Tab:function(parend,nav,show){
var $_this=$(this);
$_this.find(nav).mouseover(function(){
var i=$(this).index();
$_this.find(nav).eq(i).addClass('select').siblings().removeClass('select');
$_this.find(show).eq(i).addClass('show').siblings().removeClass('show');
})
}
})
$("#box1").Tab(".box1",'span','li');
$("#box2").Tab(".box1",'span','li');
</script>
</body>
</html>
```
