选项卡解决思路
日期：2014-05-16 浏览次数：20365 次
选项卡
自己网站上做的一个选项卡，但是。自己理解不是很透，请各位指点一下。
在我的网站上运行还行，我摘出来后，就出现document.getElementById is null的错误。
而且，我再加一个tab1_btn_6就整个出现问题了。
自己网站上做的一个选项卡，但是。自己理解不是很透，请各位指点一下。
在我的网站上运行还行，我摘出来后，就出现document.getElementById is null的错误。
而且，我再加一个tab1_btn_6就整个出现问题了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function tabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
//document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
//document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};
function etabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};
</script>
<style type="text/css">
/* tab选项卡 */
.tbtncon {
height:31px;
font-size: 14px;
background:url(http://211.156.249.71:67/skin/default/images/title_bg2.jpg) repeat-x;
}
.tbtn1 {
font-size:12px;
font-weight:normal;
height:31px;
border:1px solid #ace;
}
.tbtncon li{
border:1px solid #ace;
border-left:none;
border-top:none;
color:#07519A;
cursor:pointer;
display:block;
float:left;
text-align:center;
text-decoration:none;
width:100px;
height:31px;
line-height:31px;
}
.tbtncon li:hover{
text-decoration:underline;
}
.tbtncon li.curr{
background:#fff;
border-bottom-color:#fff;
cursor:default;
background:url(http://211.156.249.71:67/skin/default/images/title_bg3.jpg) repeat-x;
}
li{
height:25px;
line-height:25px;
}
.STYLE1 {
color: #0000FF;
font-weight: bold;
}
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="tbtn1">
<tr>
<td class="tbtncon">
<ul>
<li class="curr" id="tab1_btn_0" onmouseover="tabit(th
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
