<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tab选项卡</title>
<script type="text/javascript" src="js/ku.js"></script>
</head>
<style>
ul, body {margin:0;padding:0;}
ul {margin:50px;}
li {list-style:none;float:left;width:50px;background:#ccc;}
.tabIn {background:#fff;}
.tabCont {display:none;margin:5px 0 0 50px;}
.hui {display:block;}
</style>
<body>
<div id="tabBox">
<ul class="hhc">
<li class="tabIn">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
<div style="clear:both;"></div>
<div class="tabCont hui">文字1 </div>
<div class="tabCont">文字2</div>
<div class="tabCont">文字3</div>
<div class="tabCont">文字4</div>
</div>
<script type="text/javascript" >
$(function(){
$(".hhc li").each(function(jie){
$(this).mousemove(function(){
$("li.tabIn").removeClass("tabIn");
$(this).addClass("tabIn");
$(".hui").removeClass("hui");
$("#tabBox .tabCont").eq(jie).addClass("hui");
})
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号