<!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" />
<title>选项卡切换</title>
<style type="text/css">
*{
margin:0;
padding:0;}
.main{
width:300px;
height:200px;
border:1px solid #666;}
.title{
width:280px;
height:40px;
border:1px solid #CCC;
margin:10px 10px 0 10px;
border-bottom:none;
background:#060;}
.content{
width:280px;
height:140px;
border:1px solid #CCC;
margin:0 10px 10px 10px;
border-top:none;
background:#090;}
ul li{
display:block;
padding:10px 20px;
float:left;
list-style-type:none;
font-size:16px;
text-align:center;}
a{
text-decoration:none;}
.title ul li:hover{
background:#030;}
</style>
<script src="jquery-1.6.4.js" type="text/javascript">
</script>
<script>
$(function(){$(".title ul li").mouseover(function(){
$(this).addClass("current").siblings.removeClass("current");
var index=$(".title ul li").index(this);
$(".content ul").eq(index).show().siblings().hide();
});
});
</script>
</head><body>
<div class="main">
<div class="title">
<ul>
<li>新闻|</li>
<li>体育|</li>
<li>娱乐|</li>
</ul>
</div>
<div class="content">
<ul class="current">
<li>xinwen</li>
</ul>
<ul style="display:none;">
<li>tiyu</li>
</ul>
<ul style="display:none;">
<li>yule</li>
</ul>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡切换</title>
<style type="text/css">
*{
margin:0;
padding:0;}
.main{
width:300px;
height:200px;
border:1px solid #666;}
.title{
width:280px;
height:40px;
border:1px solid #CCC;
margin:10px 10px 0 10px;
border-bottom:none;
background:#060;}
.content{
width:280px;
height:140px;
border:1px solid #CCC;
margin:0 10px 10px 10px;
border-top:none;
background:#090;}
ul li{
display:block;
padding:10px 20px;
float:left;
list-style-type:none;
font-size:16px;
text-align:center;}
a{
text-decoration:none;}
.title ul li:hover{
background:#030;}
</style>
<script src="jquery-1.6.4.js" type="text/javascript">
</script>
<script>
$(function(){$(".title ul li").mouseover(function(){
$(this).addClass("current").siblings.removeClass("current");
var index=$(".title ul li").index(this);
$(".content ul").eq(index).show().siblings().hide();
});
});
</script>
</head><body>
<div class="main">
<div class="title">
<ul>
<li>新闻|</li>
<li>体育|</li>
<li>娱乐|</li>
</ul>
</div>
<div class="content">
<ul class="current">
<li>xinwen</li>
</ul>
<ul style="display:none;">
<li>tiyu</li>
</ul>
<ul style="display:none;">
<li>yule</li>
</ul>
</div>
</div>
</body>
</html>
siblings()少了()
<!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" />
<title>选项卡切换</title>
<style type="text/css">
*{
margin:0;
padding:0;}
.main{
width:300px;
height:200px;
border:1px solid #666;}
.title{
width:280px;
height:40px;
border:1px solid #CCC;
margin:10px 10px 0 10px;
border-bottom:none;
background:#060;}
.content{
width:280px;
height:140px;
border:1px solid #CCC;
margin:0 10px 10px 10px;
border-top:none;
background:#090;}
ul li{
display:block;
padding:10px 20px;
float:left;
list-style-type:none;
font-size:16px;
text-align:center;}
a{
text-decoration:none;}
.title ul li:hover{
background:#030;}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</script>
<script>
$(function(){
$(".title ul li").mouseover(function(){
$(this).addClass("current").siblings().removeClass("current");
var index = $(".title ul li").index(this);
$(".content ul").eq(index).show().siblings().hide();
});});
</script>
</head><body>
<div class="main">
<div class="title">
<ul>
<li>新闻|</li>
<li>体育|</li>
<li>娱乐|</li>
</ul>
</div>
<div class="content"> <ul class="current">
<li>xinwen</li>
</ul>
<ul style="display:none;">
<li>tiyu</li>
</ul>
<ul style="display:none;">
<li>yule</li>
</ul>
</div>
</div>
</body>
</html>