选项卡

 <!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>
阅读更多
个人分类: js
想对作者说点什么? 我来说一句

选项卡选项卡选项卡选项卡

2009年06月25日 303KB 下载

网页选项卡样式的代码

2009年11月27日 42KB 下载

Android中使用View实现选项卡

2017年08月10日 35.36MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭