<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="script/jquery-1.7.js" ></script>
<title>无标题文档</title>
</head>
<style type="text/css">
#test{width:400px; height:400px; border:1px solid #ccc;}
.tab{clear:both;}
.tab li{float:left; border:1px solid #ccc; list-style:none; font-size:12px; width:80px; text-align:center;}
.tabStyle{background:#ededed;}
.content{clear:both; height:400px;}
#content02,#content03,#content04{display:none;}
</style>
<body>
<script>
$(document).ready(function(){
//alert($(".tab li").length);
//alert("content|"+$(".content li").length)
//$("#test").mouseover(function(){
//alert(0);
//})\
$(".tab li").each(function(xxx){
$(this).mouseover(function(){
$(".content li").hide();
$(".content li").eq(xxx).show();
})
})
})
</script>
<div id="test">
<ul class="tab">
<li class="tabStyle" id="tab01">标签1</li>
<li class="tabStyle" id="tab02">标签2</li>
<li class="tabStyle" id="tab03">标签3</li>
<li class="tabStyle" id="tab04">标签4</li>
</ul>
<style>
.content li{display:none;}
</style>
<div class="content">
<ul>
<li> class="content" id="content01">1111</li>
<li> class="content" id="content02">1111</li>
<li> class="content" id="content03">1111</li>
<li> class="content" id="content04">1111</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
//$("#test").css("color","red");
//$("#tab01").mouseover(function(){
//$("#tab01").css("background","#000");
//$(".content").hide();
//$("#content01").show();
//});
//$("#tab02").mouseover(function(){
//$("#tab02").css("background","#000");
//$(".content").hide();
//$("#content02").show();
//});
</script>
<style type="text/css">.name{width:100px; height:100px; background:#ccc;}</style>
<p class="name"></p>
<script type="text/javascript">
$(function(){
$(".name").slideDown("fast");
})
</script>
</body>
</html>
- 1
- 2
前往页