<!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>
<title>自适应宽度的标签导航</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>
BODY {
FONT-SIZE: 12px;
FONT-FAMILY: "宋体"
}
#con {
FONT-SIZE: 12px;
margin: 0px auto;
WIDTH: 600px;
}
#tags {
padding: 0px 0px 0px 30px;
height: 26px;
border-bottom:#eead2f 2px solid;
}
#tags li {
background: url(kbqbb_tab.gif) no-repeat left bottom;
float: left;
margin-right: 5px;
list-style: none;
height: 26px;
cursor:pointer;
}
#tags li span {
padding-right: 10px;
background: url(kbqbb_tab.gif) no-repeat right bottom;
float: left;
COLOR: #999;
line-height: 26px;
height: 26px;
text-decoration:none;
margin-left:10px;
}
#tags li.selectTag {
background-position: left top;
margin-bottom: -2px;
position: relative;
height: 28px;
}
#tags li.selectTag span {
background-position: right top;
color:#e17439;
font-weight:bold;
line-height: 28px;
height: 28px;
}
</STYLE>
</head>
<body>
<div id="con">
<ul id="tags">
<li><span onClick="selectTag('tagContent0',this)">业务消息</span></li>
<li class="selectTag"><span onClick="selectTag('tagContent1',this)">船民消息</span></li>
<li><span onClick="selectTag('tagContent2',this)">可变情报板消息</span></li>
</ul>
</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";
// 操作内容
}
</SCRIPT>
</body>
</html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title>自适应宽度的标签导航</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>
BODY {
FONT-SIZE: 12px;
FONT-FAMILY: "宋体"
}
#con {
FONT-SIZE: 12px;
margin: 0px auto;
WIDTH: 600px;
}
#tags {
padding: 0px 0px 0px 30px;
height: 26px;
border-bottom:#eead2f 2px solid;
}
#tags li {
background: url(kbqbb_tab.gif) no-repeat left bottom;
float: left;
margin-right: 5px;
list-style: none;
height: 26px;
cursor:pointer;
}
#tags li span {
padding-right: 10px;
background: url(kbqbb_tab.gif) no-repeat right bottom;
float: left;
COLOR: #999;
line-height: 26px;
height: 26px;
text-decoration:none;
margin-left:10px;
}
#tags li.selectTag {
background-position: left top;
margin-bottom: -2px;
position: relative;
height: 28px;
}
#tags li.selectTag span {
background-position: right top;
color:#e17439;
font-weight:bold;
line-height: 28px;
height: 28px;
}
</STYLE>
</head>
<body>
<div id="con">
<ul id="tags">
<li><span onClick="selectTag('tagContent0',this)">业务消息</span></li>
<li class="selectTag"><span onClick="selectTag('tagContent1',this)">船民消息</span></li>
<li><span onClick="selectTag('tagContent2',this)">可变情报板消息</span></li>
</ul>
</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";
// 操作内容
}
</SCRIPT>
</body>
</html>