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标签具有了区块的属性。

【自制】ul、li模拟select效果

利用ul、li结合javascript模拟出selec的t效果,相比较html提供的原始select标签有以下好处: 1.使下拉选择框的可控性请更高,你尽可以按你想要的样式、大小随意制作出满足你需求的...
  • qq_19891827
  • qq_19891827
  • 2016年03月10日 15:35
  • 4924

使用jQuery模拟鼠标点击a标签事件

[文章作者:磨延城 转载请注明原文出处: http://mo2g.com/view/42/ ] 我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久。...
  • daijiguo
  • daijiguo
  • 2015年09月28日 10:55
  • 3180

Beetl 自定义标签的使用笔记

最近写一个小博客网站用到
  • hdj_myth
  • hdj_myth
  • 2014年08月05日 09:55
  • 3889

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
  • 878

HTML tag(标签)用法

架构 *****************************                     ...             ... ...               ...
  • u012777182
  • u012777182
  • 2014年07月10日 14:02
  • 309

穿梭框:HTML5 select 标签模拟穿梭框

一、HTML5 select 标签模拟穿梭框效果 二、源码 穿梭框 ::-webkit-scrollbar { width: 0px } .sele...
  • qq_25065257
  • qq_25065257
  • 2017年12月27日 15:48
  • 36

JSP树型标签 Tree Tag

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

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

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

Android 图片边角带标签tag

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

struts2 tag 标签手册(2.0全部收录,详细,超值)

  • 2010年08月23日 15:48
  • 2.58MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML模拟tag标签
举报原因:
原因补充:

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