tab切换
tab 切换
<!DOCTYPE html>
<meta charset="utf-8">
<title>导航练习1</title>
<style>
html,body,ul,li{padding:0;margin:0}
ul{list-style-type:none}
.nav{height:31px}
.nav li{float:left;padding:0 10px;line-height:31px;background:#ccc;margin-right:10px;cursor:pointer;display:inline}
.nav li.cur{background:#000;color:#fff}
.navcon li{width:300px;border:1px solid #ccc;line-height:300px;height:300px;text-align:center}
.hidden{display:none}
</style>
<ul class="nav">
<li class="cur">第一项
<li>第二项
<li>第三项
</ul>
<ul class="navcon">
<li>第1项内容
<li class="hidden">第2项内容
<li class="hidden">第3项内容
</ul>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(".nav li").mouseover(function(){
var index=$(this).index();
$(this).addClass("cur").siblings().removeClass("cur");
$(".navcon li").eq(index).show().siblings().hide();
});
</script>
