实用美观，兼容IE与Firefox的多选项卡(附Demo)
function showOrder(type, thisC, thisList) {
// var allInputObject = document.all.Title.getElementsByTagName("div");// ie有效,Firefox失效
var allInputObject=document.getElementById("Title").getElementsByTagName("div");
for (var i = 0; i < allInputObject.length; i++) {
if (i == allInputObject.length - 1)
allInputObject[i].className = "hilast";
else if (i == 0)
allInputObject[i].className = "hifirst";
else
allInputObject[i].className = "hi";
}
thisC.className = "curr";
// var alldiv = document.all.List.getElementsByTagName("div"); // ie有效,Firefox失效
var alldiv = document.getElementById("List").getElementsByTagName("div");
for (var i = 0; i < alldiv.length; i++) {
alldiv[i].style.display = "none";
// eval('document.getElementById("list3").style.display='';');
}
//eval("document.all." + thisList + ".style.display='';"); //ie有效,Firefox失效
document.getElementById(thisList).style.display=''; //兼容ie，Firefox
}
Order.html
<div id="orders" style="width: 100%">
<div id="Title">
<div class="hifirst">
</div>
<div class="curr" onclick="showOrder(1,this,'list1')">
我的订单</div>
<div class="hi" onclick="showOrder(2,this,'list2')">
待付款订单</div>
<div class="hi" onclick="showOrder(3,this,'list3')">
收货确认订单</div>
<div class="hi" onclick="showOrder(4,this,'list4')">
未评论订单</div>
<div class="hilast" style="width:350px">
</div>
</div>
<div id="List" style="clear: both">
<div id="list1" style="display: block">
<table width="766" align="center" cellpadding="0" cellspacing="0">
ListHTML
<tr>
<td height="25" colspan="7" align="right" style="border-top:1px solid #cccccc">
showMsg1
ErrorHTML
</td>
</tr>
</table>
</div>
<div id="list2" style="display: none">
<table width="766" border="0" align="center" cellpadding="0" cellspacing="0">
ListHTML2
<tr bgcolor="#FFFFFF">
<td height="25" colspan="7" align="right" style="border-top:1px solid #cccccc">
showMsg2
ErrorHTML2
</td>
</tr>
</table>
</div>
<div id="list3" style="display: none">
<table width="766" border="0" align="center" cellpadding="0" cellspacing="0">
ListHTML3
<tr bgcolor="#FFFFFF">
<td height="25" colspan="7" align="right" style="border-top:1px solid #cccccc">
showMsg3
ErrorHTML3
</td>
</tr>
</table>
</div>
<div id="list4" style="display: none">
<table width="766" border="0" align="center" cellpadding="0" cellspacing="0">
ListHTML4
<tr bgcolor="#FFFFFF" align="right">
<td height="25" colspan="7" align="right" style="border-top:1px solid #cccccc">
showMsg4
ErrorHTML4
</td>
</tr>
</table>
</div>
</div>
</div>
member.css
body
{
font-size:12px;
font-family:宋体;
}
.title
{
color:Black;
font-weight:bold;
}
#orders div.curr
{
height:30px;
line-height:30px;
float:left;
border-left:2px solid #f9b580;
border-top:1px solid #f9b580;
border-right:2px solid #f9b580;
cursor:pointer;
font-weight: bold;
text-align:center;
font-family: 宋体;
font-size:15px;
width:100px;
}
#orders div.currlast
{
border-bottom:2px solid #9cc65b;
cursor:pointer;
background:#c6d7a0;
padding-top:10px;
text-align:center;
font-weight: bold;
font-family: 宋体;
padding-bottom:5px;
width:100px;
}
#orders div.hi
{
height:29px;
float:left;
border-bottom:2px solid #f9b580;
border-right:2px solid #ffffff;
text-align:center;
cursor:pointer;
font-family: 宋体;
background:#dddddd;
line-height:29px;
font-size:15px;
width:100px;
}
#orders div.hilast
{
height:29px;
border-bottom:2px solid #f9b580;
font-weight: bold;
font-family: 宋体;
width:260px;
float:left;
}
#orders div.hifirst
{
height:29px;
float:left;
border-bottom:2px solid #f9b580;
padding-right:10px;
width:5px;
}
#dataList
{
line-height:30px;
}
#ctl00_ContentPlaceHolder1_goods a
{
font-family: 宋体;
font-size: 12px;
color: #2f6fac;
}
#f_list a
{
font-family: 宋体;
font-size: 12px;
color: #2f6fac;
}
#f_title
{
height: 28px;
background: #f9f5ab;
text-align: left;
padding: 8px 0px 0px 10px;
font-weight: bold;
font-family: 宋体;
}
#f_link a
{
color:Red;
}
#Annex a.cs1
{
font-family: 宋体;
font-size: 12px;
color: #f11f1a;
}
#Annex a.cs2
{
font-family: 宋体;
font-size: 12px;
color: #2f6fac;
}
.titleStyle
{
height: 28px;
background: #c6d7a0;
text-align: left;
padding: 5px 0px 0px 10px;
font-weight: bold;
font-family: 宋体;
}
.titleStylenone
{
height: 28px;
background: #f0efef;
text-align: left;
padding: 5px 0px 0px 10px;
font-weight: bold;
font-family: 宋体;
border:1px solid #d8d8d8;
width:800px;
}
#attentionSet {border:1px solid #ffffff;padding:5px 0px 5px 5px;}
#attentionSet div{height:25px;}
.KK_RsNull{
border:1px solid #7DB3DD;
font:'宋体';
color:#000000;
font-size:12px;
background-color:#CDE6F3;
margin-left:60px;
margin-top:30px;
padding-top:15px;border-style:dashed;
padding-left:40px;
padding-bottom:15px;
}
#orderinfo div.contentTi{padding:5px 0px 0px 10px;float:left;}
#orderinfo div.content{padding:5px 0px 0px 10px;}
#memcontent div{padding:5px 0px 0px 5px;}
.titlefont
{
background-image:url(http://member.uke92.com/images/menu-bg.gif);
color: #007cc6;
width: 200px;
text-align: center;
height:25px;
padding-top:5PX;
font-size:15px;
font-family:宋体;
font-weight:bold;
}
.meminfomsg{padding: 3px 5px 0px 8px; margin: 0px 5px 0px 5px;height:35px;border: 2px dotted #ea6200}
.memblink{text-align:right;padding:5px 10px 10px 0px;}
#Ad div{padding:0px 0px 5px 5px;float:left}
.tdline{border-bottom:1px dashed #e7ca96;}
.line_l{border:1px solid #e2e2e2;}
.menum_cart{color:#EB6100;}
.cart_font_color:{color:#3071B9;}
.cart_favorite_t
{
font-size: 14px;
color: #F39700;
font-weight: bold;
}
.order_center_bg{background-color:#CDEAF4;}
.order_finish_T{ color: #eb6100;
font-size: 16px;
font-weight: bold;}
.order_finish_count
{
font-weight: bold;
color: #e70013;
font-size: 14px;
}
.order_finish_font_color{color:#eb6100;}
.order_finish_font_color2{color:#026eb6;}
.order_finish_line{line-height:25px;}
.masterTitle
{
background-image:url(http://member.uke92.com/images/menu-bg2.gif);
color: #007cc6;
width: 160px;
text-align: center;
height:25px;
padding-top:5PX;
font-size:15px;
font-family:宋体;
font-weight:bold;
}
.master-Font
{
font-weight:bold;
color:#e96303;
}
.order-list
{
border-left:1px solid #cccccc;
border-top:1px solid #cccccc;
text-align:center;
vertical-align:middle;
height:25px;
}
.order-listr
{
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
border-top:1px solid #cccccc;
text-align:center;
vertical-align:middle;
height:25px;
}
.centerAdlist
{
width: 198px; padding: 8px 0px 0px 0px;
}
ol.newol
{
list-style: decimal inside;
line-height:22px;
margin-bottom:0px;
margin-left:5px;
padding-left:-5px;
}
ol.newol a
{
text-decoration:none;
color:Black;
}
.rightContent
{
width: 100%; margin-left: 5px;
text-align:left;
}
#titleM div
{
float:left;
width:320px;
}
.borderline
{
border-left: 5px solid #FF8000;
border-top: 5px solid #FF8000;
border-right: 5px solid #FF8000;
border-bottom: 5px solid #FF8000;
}
.oldborder
{
background-color:#FF8000;
background:FF8000;
font-weight:bold;
Font-Size:14px;
}
下载：Tab_Demo
