请教这段Tab选项卡的代码为什么不起作用-HTML教程-爱易网页

请教这段Tab选项卡的代码为什么不起作用

日期：2014-05-17　浏览次数：20815 次

请问这段Tab选项卡的代码为什么不起作用？

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
    text-align:center;
}

.nTab {
    float:left;
    font-family:"宋体", arial;
    font-size:12px;
    width:600px;
    margin:0 auto;
}

.nTab .TabTitle {
    clear:both;
    height:28px;
    overflow:hidden;
}

.nTab .TabTitle ul {
    margin:0;
    padding:0;
}

.nTab .TabTitle li {
    float:left;
    width:60px;
    height:28px;
    cursor:pointer;
    list-style-type:none;
}

.nTab .TabTitle .active {
    background-image:url(a.jpg);
}

.nTab .TabTitle .normal {
    background-image:url(b.jpg);
}

.nTab .TabContent {
    margin:0 auto;
    width:auto;
}

.none {
    display:none;
}
</style>

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

<body>

<div class="nTab">

<div class="TabTitle">
<ul id="myTab0">
<li class="active" onmouseover="nTabs(this,0);">源碼首頁</li>
<li class="normal" onmouseover="nTabs(this,1);">最新更新</li>
<li class="normal" onmouseover="nTabs(this,2);">下載排行</li>
<li class="normal" onmouseover="nTabs(this,3);">源碼分類</li>
<li class="normal" onmouseover="nTabs(this,4);">網頁特效</li>
</ul>
</div>

<div class="TabContent">
<div id="myTab0_Content0"><a href="#">源碼首頁</a></div>
<div id="myTab0_Content1" class="none"><a href="#">最新更新</a></div>
<div id="myTab0_Content2" class="none"><a href="#">下載排行</a></div>
<div id="myTab0_Content3" class="none"><a href="#">源碼分類</a></div>
<div id="myTab0_Content4" class="none"><a href="#">網頁特效</a></div>
</div>

</div>

</body>
</html>

a.jpg

b.jpg

------解决方案--------------------
改成这样

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
    text-align:center;
}

.nTab {
    float:left;
    font-family:"宋体", arial;
    font-size:12px;
    width:600px;
    margin:0 auto;
}

.nTab .TabTitle {
    clear:both;
    height:28px;
    overflow:hidden;
}

.nTab .TabTitle ul {
    margi

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

请教这段Tab选项卡的代码为什么不起作用

相关资料更多>

推荐阅读更多>