HTML模拟tag标签

原创 2013年12月04日 09:53:13

自己尝试着用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标签具有了区块的属性。

相关文章推荐

10.6. HTML fieldset 标签 -- 表单分组(转http://www.dreamdu.com/xhtml/tag_fieldset)

10.6.1. HTML legend 标签如果一个页面的表单项太多,我们最好把它们分组显示,就像使用p标签分开段落一样,可以使用fieldset与legend标签对表单内容分组.fieldset 标...
  • fjfdszj
  • fjfdszj
  • 2011年03月03日 10:08
  • 830

HTML tag(标签)用法

架构 *****************************                     ...             ... ...               ...

Struts2 自定义下拉框标签Tag(源码)

  • 2016年02月25日 10:02
  • 3.34MB
  • 下载

Android 图片边角带标签tag

  • 2016年06月12日 16:28
  • 14.57MB
  • 下载

java--自定义标签(tag、tld两种)

1.一篇不错的 java自定义标签的文章地址:http://gaoshu2006.blog.sohu.com/113222643.html 2.sun公司java自定义标签原文地址:http:/...

JSP树型标签 Tree Tag

  • 2009年06月01日 15:25
  • 1.29MB
  • 下载

Android-教你自作一个简单而又实用的流式Tag标签布局

在这一章节,我们继续学习Android自定义控件。这里要自定义的是Android里面的一个常用控件-Android流式Tag布局,这里我们命名为:FlowTagLayout,我们要实现的流式布局,有如...

dedecms-tag标签纯静态化教程

  • 2014年07月23日 11:18
  • 106KB
  • 下载

Android流式标签(TAG)

  • 2015年04月12日 19:26
  • 135KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML模拟tag标签
举报原因:
原因补充:

(最多只允许输入30个字)