html编辑网页。我想编一个模块
http://nba.sports.163.com/2010/player/home/294.html，类似于右边的“同位置比较”，我想鼠标一移到得分、篮板上就会自己切换...
http://nba.sports.163.com/2010/player/home/294.html，类似于右边的“同位置比较”，我想鼠标一移到得分、篮板上就会自己切换下面的数据，我不知道这种模块叫什么，搜也不知道怎么搜，你们知道的可以告诉我相关信息，比如它叫什么名字，代码什么的我可以自己找，发教程的网址也行，不胜感激
展开
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<style>
body{margin:0;padding:0;background:#333;font-size:22px;font-weight:bold;color:#444;font-
family:tahoma;}
.box{width:600px;height:295px;margin:50px auto;background:#eee;overflow:hidden;}
.tab{height:32px;width:600px;overflow:hidden;border-bottom:5px solid orange;}
.tab a{width:200px;height:32px;display:block;background:#ddd;float:left;color:#666;font-
size:14px;font-family:tahoma;font-weight:bold;text-decoration:none;line-height:32px;text-
align:center;}
.tab a.hover{background:orange;color:#fff;}
.content{width:590px;height:253px;background:#eee;line-height:253px;border:5px solid
orange;border-top:none;text-align:center;display:none;}
</style>
<body>
<div class="box">
<div class="tab"><a href="#" class="hover">Tab1</a><a href="#">Tab2</a><a href="#">Tab3</a></div>
<div class="content" style="display:block;">
我是Tab1
</div>
<div class="content">
我是Tab2
</div>
<div class="content">
我是Tab3
</div>
</div>
</body>
</html>
<script>
var pre=0,cur=0,mid=0;
$(".tab a").mouseover(function() {
cur=$(".tab a").index(this);
if(cur!=pre){
$(".tab a:eq("+pre+")").removeClass("hover");
$(this).addClass("hover");
$(".content:eq("+cur+")").css("display","block");
$(".content:eq("+pre+")").css("display","none");
pre=cur;
}
});
</script>
这是一个简单的Tab切换效果，右键复制保存到html就可以看到，已经过IE6,Oprea测试
-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<style>
body{margin:0;padding:0;background:#333;font-size:22px;font-weight:bold;color:#444;font-
family:tahoma;}
.box{width:600px;height:295px;margin:50px auto;background:#eee;overflow:hidden;}
.tab{height:32px;width:600px;overflow:hidden;border-bottom:5px solid orange;}
.tab a{width:200px;height:32px;display:block;background:#ddd;float:left;color:#666;font-
size:14px;font-family:tahoma;font-weight:bold;text-decoration:none;line-height:32px;text-
align:center;}
.tab a.hover{background:orange;color:#fff;}
.content{width:590px;height:253px;background:#eee;line-height:253px;border:5px solid
orange;border-top:none;text-align:center;display:none;}
</style>
<body>
<div class="box">
<div class="tab"><a href="#" class="hover">Tab1</a><a href="#">Tab2</a><a href="#">Tab3</a></div>
<div class="content" style="display:block;">
我是Tab1
</div>
<div class="content">
我是Tab2
</div>
<div class="content">
我是Tab3
</div>
</div>
</body>
</html>
<script>
var pre=0,cur=0,mid=0;
$(".tab a").mouseover(function() {
cur=$(".tab a").index(this);
if(cur!=pre){
$(".tab a:eq("+pre+")").removeClass("hover");
$(this).addClass("hover");
$(".content:eq("+cur+")").css("display","block");
$(".content:eq("+pre+")").css("display","none");
pre=cur;
}
});
</script>
这是一个简单的Tab切换效果，右键复制保存到html就可以看到，已经过IE6,Oprea测试
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
