四行代码编写出选项卡效果

最新推荐文章于 2024-09-18 09:47:26 发布

高明

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量591

点赞数

文章标签： class function xhtml border html

本文链接：https://blog.csdn.net/gaoming918/article/details/7236777

版权

<!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="jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
*{
	padding:0px;
	margin:0px auto;
}
body{
	padding:0px;
	margin:0px auto;
	font-size:12px;
}
#xuan{
	border:#ccc solid 1px;
	width:200px;
	height:180px;
	margin-top:5px;
	display:block;
}
.top{
	height:28px;
	line-height:28px;
	background-color:#f5f5f5;
	border-bottom:#e2e2e2 solid 1px;
}
.top ul{
	list-style:none;
	padding:0px;
	margin:0px;
}
.top li{
	margin:0px;
	padding:0px 4px;
	text-align:center;
	float:left;
	cursor:pointer;
}
.top li.active{
	background-color:#fff;
	color:#06c;
	border-right:#e2e2e2 solid 1px;
}
.ht{
	width:188px;
	height:158px;
}
.z01,.z02{
	height:152px;
	text-align:left;
	padding:2px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    $("ul>li").bind("click",function(){
         $("#ht>div").hide();
         $("#ht>div:eq("+$("ul>li").index($(this))+")").show();
         $("ul li").removeClass("active");
         $(this).addClass("active");
    }) 
	 
});
</script>
</head>

<body>
<div id="xuan">
<div class="top">
<ul>
<li class="active" tag="01">某卡科技</li><li tag="02">上海科技</li><li tag="03">谷歌科技</li>
</ul>
</div>
<div id="ht">
<div class="z01" style="display:block" tag="01">杭州某卡科技</div>
<div class="z02" style="display:none" tag="02">上海神州技术</div>
<div class="z02" style="display:none" tag="03">中国谷歌科技</div>
</div>
</div>
</body>
</html>