谁能推荐一个简单的选项卡(tab)代码

Question

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

Answer 1

           <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;
        }
直接复制应该可以用

Answer 2

tab.js文件
// tasktab
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"qiehuan01":"";
  con.style.display=i==cursel?"block":"none";
 }
}前台代码:<div class="info_col1">
<div class="info_title">
<ul>
<li id="one1" onmouseover="setTab('one',1,3)" class="qiehuan01">商品描述</li>
           <li id="one2" onmouseover="setTab('one',2,3)">商品属性</li>
           <li id="one3" onmouseover="setTab('one',3,3)">商品标签</li>
/ul>
<div class="clear"></div>
</div><div class="info_con" id="con_one_1">
<%= spms1 %>
</div>
<div class="info_con" id="con_one_2" style="display:none">
<%= spms2 %>
</div>
<div class="info_con" id="con_one_3" style="display:none">
<%= spms3 %>
</div>
</div>

Answer 3

jquery ui里不是有么，百度看下官网

Answer 4

js
jquery  www.jquery.com
easyui  www.jeasyui.com
extjs  www.sencha.com

Answer 5

easyui里面有tab的单独js。可以使用。
如果想拿来完全不写不改代码。你只能等好心人了