选项卡解决思路

2014-05-12

选项卡自己网站上做的一个选项卡，但是。自己理解不是很透，请各位指点一下。在我的网站上运行还行，我摘出来后

选项卡
自己网站上做的一个选项卡，但是。自己理解不是很透，请各位指点一下。

在我的网站上运行还行，我摘出来后，就出现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(this)"><a href="/dangwugongkai/" class="tbt">11公开</a></li>
<li id="tab1_btn_1" onmouseover="tabit(this)"><a href="/cwgk/" class="tbt">22公开</a></li>
<li id="tab1_btn_2" onmouseover="tabit(this)"><a href="/zfzz/" class="tbt">33公开</a></li>
<li id="tab1_btn_3" onmouseover="tabit(this)"><a href="/hfpy/" class="tbt">44公开</a></li>
<li id="tab1_btn_4" onmouseover="tabit(this)"><a href="/xxsbd/" class="tbt">55公开</a></li>
<li id="tab1_btn_5" onmouseover="tabit(this)"><a href="/pajs/" class="tbt">66公开</a></li>
<!--<li id="tab1_btn_6" onmouseover="etabit(this)"><a href="/ddqzlxddqzlx/" class="tbt">77公开</a></li>-->
</ul>
</td>
</tr>
</table>
 </body>
</html>

[解决办法]

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.getElementsByTagName("li").length;
//改一下这个地方，tabNumber，不要使用childNodes这个了，这个会有空白的文本结点的。你看看tabNumber这个值是多少就知道了。
console.log(tabNumber);
    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";
};

换个获取子元素的方法试试吧。试试这样行了不

[解决办法]

<!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.children.length;
    //console.log(btn.parentNode.children,tabNumber,tabName);
    for(i=0;i<tabNumber;i++){
            //document.getElementById(tabName+"_div_"+i).style.display = "none";
            
            document.getElementById(tabName+"_btn_"+i).className = "";
        };
        //document.getElementById(tabName+"_btn_2").className = "asdasdf";
        //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.children.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(this)"><a href="/dangwugongkai/" class="tbt">11公开</a></li>
            <li id="tab1_btn_1" onmouseover="tabit(this)"><a href="/cwgk/" class="tbt">22公开</a></li>
            <li id="tab1_btn_2" onmouseover="tabit(this)"><a href="/zfzz/" class="tbt">33公开</a></li>
            <li id="tab1_btn_3" onmouseover="tabit(this)"><a href="/hfpy/" class="tbt">44公开</a></li> 
 
            <li id="tab1_btn_4" onmouseover="tabit(this)"><a href="/xxsbd/" class="tbt">55公开</a></li>
            <li id="tab1_btn_5" onmouseover="tabit(this)"><a href="/pajs/" class="tbt">66公开</a></li>
            <li id="tab1_btn_6" onmouseover="etabit(this)"><a href="/ddqzlxddqzlx/" class="tbt">77公开</a></li>
        </ul>
    </td>
    </tr>
</table>
 </body>
</html>

tabNumber，不要使用childNodes这个了，这个会有空白的文本结点的这里包含空白长度是15 因为你的li没有16个所以会报错改成children就可以了

热点排行

JavaScript

选项卡解决思路