日期:2014-05-17  浏览次数:20527 次

谁能推荐一个简单的选项卡(tab)代码
如题,就要那种最简单的,选项卡中的每一个是一个规则的table,在网上(包括一些站长网站)搜了一下,竟是些不规则的选项卡,和我想要的有很大差别,求各位帮帮忙,谢谢。

------解决方案--------------------
<tr>
<td colspan="8">
<div id="con">
<ul id="tags">
<li class="selectTag"><a onclick="selectTag('tagContent0',this)" href="javascript:void(0)">
费用明细归集表</a> </li>
<li><a onclick="selectTag('tagContent1',this)" href="javascript:void(0)">费用用途汇总</a>
</li>
</ul>
</td>
<tr>
js
 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";
}

样式
 #tags
{
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px 0px 0px 10px;
padding-top: 0px;
height: 23px;
}
#tags LI
{
background: url(../images/tagleft.gif) no-repeat left bottom;
float: left;
margin-right: 1px;
list-style-type: none;
height: 23px;
}
#tags LI A
{
padding-right: 10px;
padding-left: 10px;
background: url(../images/tagright.gif) no-repeat right bottom;
float: left;
padding-bottom: 0px;
color: #999;
line-height: 23px;
padding-top: 0px;
height: 23px;
text-decoration: none;
}
#tags LI.emptyTag
{
background: none transparent scroll repeat 0% 0%;
width: 4px;
}
#tags LI.selectTag
{
background-position: left top;
margin-bottom: -2px;
position: relative;
height: 25px;
}
#tags LI.selectTag A
{
background-position: right top;
color: #000;
line-height: 25px;
height: 25px;
}
#tagContent
{
border-right: #aecbd4 1px solid;
padding-right: 1px;
border-top: #aecbd4 1px solid;
padding-left: 1px;
padding-bottom: 1px;
border-left: #aecbd4 1px solid;
padding-top: 1px;
border-bottom: #aecbd4 1px solid;
background-color: #fff;
}
.tagContent
{
padding-right: 10px;
display: none;
padding-left: 10px;
background: url(images/bg.gif) repeat-x;
padding-bottom: 10px;
width: 98%;
color: #474747;
padding-top: 10px;
}
#tagContent DIV.selectTag
{
display: block;
}<