使用jQuery实现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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{
list-style:none;
}
li{
list-style:none;
border:1px solid #000000;
width:60px;
height:20px;
float:left;
}
#tabcont{
width:180px;
height:150px;
border:1px solid #000000;
position:absolute;
top:38.4px;
left:49px;
}
.color{
background:#33FFCC;
}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#tab li").click(function(){
$("#tab li").removeClass();//删除默认的class
var $t=$("#tab li").index(this);
//获取选中的li的下标 $(this).addClass("color");
//对选中的下标添加class $("#tabcont div").css("display","none");
//把所有内容肉置为空 console.log($t)
$("div.tabcont>div").eq($t).show().siblings().hide();
//相同下标的显示，其他的隐藏内容 });
});
</script>
</head>
<body>
<div id="tab">
<ul id="title">
<li class="color">综合</li>
<li>新闻</li>
<li>活动</li>
</ul>
<div id="tabcont">
<div id="cont0">1</div>
<div id="cont1" style="display:none">2</div>
<div id="cont2" style="display:none">3</div>
</div>
</div>
</body>
</html>
3549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
