一个jq框架制作的TAB附上代码
<!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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function(){
$("ul li a").each(function(index){
$(this).click(function(){
$("ul li a").removeClass();
$(this).addClass("ablock");
$(".show").hide();
$(".show").eq(index).show();
});
});
});
</script>
<style type="text/css">
ul{list-style:none; padding:0; margin:0; margin-left:20px; background-image:url(selected.gif); background-repeat:repeat-x; height:29px; width:464px;}
ul li{width:110px; height:29px; line-height:29px; float:left; text-align:center; margin-right:5px;}
a{display:block; color:#333;}
.show{width:482px; height:120px; clear:both; display:none; border:1px solid #CCC; text-align:center; background:#F3F3F3;}
.block{display:block;}
.ablock{ background-image:url(selected.gif); background-repeat:repeat-x; background-position:0 -29px;}
</style>
</head>
<body>
<ul>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li><a href="#">d</a></li>
</ul>
<div class="show block">
hit_1
</div>
<div class="show">
hit_2
</div>
<div class="show">
hit_3
</div>
<div class="show">
hit_4
</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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function(){
$("ul li a").each(function(index){
$(this).click(function(){
$("ul li a").removeClass();
$(this).addClass("ablock");
$(".show").hide();
$(".show").eq(index).show();
});
});
});
</script>
<style type="text/css">
ul{list-style:none; padding:0; margin:0; margin-left:20px; background-image:url(selected.gif); background-repeat:repeat-x; height:29px; width:464px;}
ul li{width:110px; height:29px; line-height:29px; float:left; text-align:center; margin-right:5px;}
a{display:block; color:#333;}
.show{width:482px; height:120px; clear:both; display:none; border:1px solid #CCC; text-align:center; background:#F3F3F3;}
.block{display:block;}
.ablock{ background-image:url(selected.gif); background-repeat:repeat-x; background-position:0 -29px;}
</style>
</head>
<body>
<ul>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li><a href="#">d</a></li>
</ul>
<div class="show block">
hit_1
</div>
<div class="show">
hit_2
</div>
<div class="show">
hit_3
</div>
<div class="show">
hit_4
</div>
</body>
</html>
