实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab选项卡</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
*{margin: 0;padding: 0;border: 0;}
ul{list-style: none;width: 400px;height: 400px;border: 1px solid #ccc;margin: 0 auto;margin-top: 100px;overflow: hidden;}
ul li{width: 25%;height: 40px;background: #f40;line-height: 40px;color: #fff;text-align: center;float: left;cursor: pointer;}
/*ul li:hover{background: #f45;}*/
ul div{width: 400px;height: 360px;}
.bg1{background: #654;}
.bg2{background: #764;display: none;}
.bg3{background: #874;display: none;}
.bg4{background: #984;display: none;}
.active{background: #546;}
.clear{clear: both;}
</style>
<body>
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
<p class="clear"></p>
<div class="bg1">1</div>
<div class="bg2">2</div>
<div class="bg3">3</div>
<div class="bg4">4</div>
</ul>
</body>
<script>
$("ul li").mouseover(function(){
var a=$(this).index();
$(this).css({background:"#f45"});
$(this).siblings("li").css({background:"#f40"});
$("div").eq(a).css({display:"block"});
$("div").eq(a).siblings("div").css({display:"none"})
console.log(a);
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
