HTML模拟tag标签

自己尝试着用HTML+css模拟一个tag标签的效果

<!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" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<style type="text/css">
dl.tabs{
	border-bottom: solid 1px #ddd;
	height:30px;
	border-color:#555555;
	border-bottom-color:#DDDDDD;
}
dl.tabs dd{
	float:left;
}
dl.tabs dd a{
	text-decoration:none;
	border: solid 1px #ddd;
	height: 29px;
	color: #555; 
	background: #eee;
	display: block; 
	width: auto;
}
dl.tabs dd a.active{
	background: none repeat scroll 0 0 #FFFFFF;
    border-width: 1px 1px 0;
    height: 30px;
}

#parent{
	width:700px;
}

.son{
	width:700px;
	height:20px;
	margin-left:20px;
}
</style>
<script type="text/javascript">
//下面两个方法是为了实现tab标签内容切换的目的
$(document).ready(
	function(){
		$("dd a").each(function(){
			$(this).bind("click",function(){
				clearClass();
				$(this).addClass("active");
				var use_id = $(this).attr("id");
				switch(use_id){
					case "simple1":
						$("#simple1_id").show();
						break;
					case "simple2":
						$("#simple2_id").show();
						break;
					case "simple3":
						$("#simple3_id").show();
						break;	
				}
			});
		});
	}
);

function clearClass(){
	$("#simple1").removeClass();
	$("#simple2").removeClass();
	$("#simple3").removeClass();
	$("#simple1_id").hide();
	$("#simple2_id").hide();
	$("#simple3_id").hide();
}

</script>
<title>无标题文档</title>
</head>
<body>
<!-- 使用最外层的目的是为了设置tag标签的宽度-->
	<div id="parent">
		<dl class="tabs"><!-- a标签的样式display: block;不能少,否则就底边线就不能和dl的底边线重合了 -->
			<dd><a class="active" href="#simple1" id="simple1">Simple Tab 1</a></dd>
			<dd><a href="#simple2" class="" id="simple2">Simple Tab 2</a></dd>
			<dd><a href="#simple3" class="" id="simple3">Simple Tab 3</a></dd>
		</dl>
		<div class="son" id="simple1_id">
			simple1 wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
		</div>
		<div class="son" id="simple2_id" style="display:none">
			simple2
		</div>
		<div class="son" id="simple3_id" style="display:none">
			simple3
		</div>
	</div>
	<p>
	备注:在css样式中,dl.tabs——标签和类属性之间没有空格,否则就不能准确的定位上去了。
</body>
</html>

 

 

 img{display:block;} 表示将img标签,也就是图片标签变成一个区块,这样img标签具有了区块的属性。

你可能感兴趣的:(html)