Tab 选项卡

 <style type="text/css">

body{
color: #000;
font-family: "宋体", arial;
font-size: 12px;
margin: 0;
}
.nTab4{
 float: left;
 width: 100%;
 background-position:left;
 background-repeat:repeat-y;
 margin-right: auto;
 margin-left: auto;
}
.nTab4 .TabTitle{ float:left;
 overflow: hidden;
 background-image: url(../images/cen1.gif);
 background-repeat: repeat-x;
 background-position: top;
 /*height: 38px;*/
 width: 100%;
}
.nTab4 .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab4 .TabTitle li{
 float: left;
 width: 80px;
 cursor: pointer;
 list-style-type: none;
 height: 38px;
 line-height:38px;
}

.nTab4 .TabTitle ul li a{
line-height:33px;
}

.nTab4 .TabTitle .active{
 background: url(../images/bt1.gif) no-repeat 0px 6px;
 color: #003399;
 padding-top:5px;
 width:81px;
 margin-left: 8px;
 line-height: 33px;
 height: 33px;
    text-align: center;
 
 font-size:12px;
}
.nTab4 .TabTitle .normal{
 background-image: url(../images/bt2.gif);
 background-position: left bottom;
 background-repeat: no-repeat;
 line-height: 33px;
 height:33px;
  width:81px;
 margin-left: 8px;
 font-size:12px;
 padding-top:5px;
    text-align: center;
}
.normal a {
 color: #333333;
 text-decoration: none;
}
.normal a:hover {
 color: #FF6600;
 text-decoration: underline;
}
.active a {
 color: #003399;
 text-decoration: none;
}
.active a:hover {
 color: #003399;
 text-decoration: underline;
}
.nTab4 .TabContent{
 background:#fff;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 padding-right: 0;
 padding-bottom: 0;
 padding-left: 0;
}
.none4 {display:none;}
.left1{ background:url(../images/left1.gif) no-repeat; width:8px; height:47px; float:left;}
.right1{ background:url(../images/right1.gif) no-repeat; width:8px; height:47px; float:left;}
.daohang{ height:47px; clear:both;}
.clear{ clear:both;}

  </style>

 

<script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }
        function nTabs(thisObj, Num) {
            if (thisObj) {
                if (thisObj.className == "active") return;
                var tabObj = thisObj.parentNode.id;
                var tabList = document.getElementById(tabObj).getElementsByTagName("li");
                for (i = 0; i < tabList.length; i++) {
                    if (i == Num) {
                        thisObj.className = "active";
                        $("DIV" + i).style.display = "block";
                    } else {
                        tabList[i].className = "normal";
                        $("DIV" + i).style.display = "none";
                    }
                }
            }
        }
    </script>

  <div class="nTab4">
            <div class="TabTitle">
                <ul id="myTab1">
                    <li id="lione" class="active" onclick="nTabs(this,0)"><a href="#">主信息</a></li>
                    <li class="normal" onclick="javascript:nTabs(this,1)"><a href="#">扩展信息</a></li>
                    <li class="normal" onclick="nTabs(this,2)"><a href="#">扫描记录</a></li>
                    <li class="normal" onclick="nTabs(this,3)"><a href="#">配送规则</a></li>
                </ul>
            </div>
        </div>
        <table id="DIV0" style="display: block" width="100%></table>

<table id="DIV1" style="display: block" width="100%></table>

<table id="DIV2" style="display: block" width="100%></table>

<table id="DIV3" style="display: block" width="100%></table>