js+div 自适应宽度的标签导航

时间：2022-07-02 14:52:33 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<meta name="keywords" content="JS代码,JS特效代码" />
<meta name="description" content="自适应宽度的标签导航" />
<title></title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>>
BODY {
	FONT-SIZE: 14px; FONT-FAMILY: "宋体"
}
OL LI {
	MARGIN: 8px;
	padding:0px;
}
#con {
	FONT-SIZE: 12px;
	
	
	border: 1px solid #999;
}
#tags {
	
	
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#tags LI {
	FLOAT: left;
	MARGIN-RIGHT: 8px;
	LIST-STYLE-TYPE: none;
	
	
	background-repeat: no-repeat;
	background-position: left bottom;
	background-color: #CCCCCC;
	border: 1px solid #ACACAC;
}
#tags LI A {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 10px;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	COLOR: #999;
	LINE-
	PADDING-TOP: 0px;
	
	TEXT-DECORATION: none;
	
	background-repeat: no-repeat;
	background-position: right bottom;
}
#tags LI.emptyTag {
	background-position: 0% 0%;
}
#tags LI.selectTag {
	BACKGROUND-POSITION: left top;
	MARGIN-BOTTOM: -2px;
	POSITION: relative;
	
	
	background-color: #FF0000;
}
#tags LI.selectTag A {
	BACKGROUND-POSITION: right top;
	COLOR: #000;
	LINE-
	
	
}
#tagContent {
	BACKGROUND-COLOR: #fff;
	padding: 1px;
	
}
.tagContent {
	DISPLAY: none;
	
	COLOR: #474747;
}
#tagContent DIV.selectTag {
	DISPLAY: block
}
</STYLE>

<DIV id=tagContent>
    <DIV class=tagContent id=tagContent0>第一个标签的内容</DIV>
    <DIV class="tagContent selectTag" id=tagContent1>第二个标</DIV>
    <DIV class=tagContent id=tagContent2>第三个标签的内容</DIV>
  </DIV>
<p></div>
  <SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
	// 操作标签
	var tag = document.getElementById("tags").getElementsByTagName("li");
	var taglength = tag.length;
	for(i=0; i<taglength; i++){
		tag[i].className = "";
	}
	selfObj.parentNode.className = "selectTag";
	// 操作内容
	for(i=0; j=document.getElementById("tagContent"+i); i++){
		j.style.display = "none";
	}
	document.getElementById(showContent).style.display = "block";
	
	
}
</SCRIPT>
</p>
www.111com.net
</BODY></HTML>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

js+div 自适应宽度的标签导航

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程