程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> javascript-求JS大神幫助,實在找不到錯誤在哪,急!!!

javascript-求JS大神幫助,實在找不到錯誤在哪,急!!!

編輯:編程綜合問答
求JS大神幫助,實在找不到錯誤在哪,急!!!

想寫一個標簽切換的特效,但怎麼也實現不了,不知道錯在哪。。。
其實自己之前寫過標簽切換,但不知道這次為什麼怎麼都出不來。。
將代碼改了又改,以下是簡略了無數次的代碼(相比原來很多東西都去掉了,簡略得不能再簡略。。。然而還是出不來效果)求大神指導
我主要是想知道自己錯在哪。。。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>無標題文檔</title>
<style type="text/css" >
.no{ display:none;}
#tabs ul li{    
    cursor:pointer;
}
.on{
    border-top:2px solid saddlebrown;
    border-bottom: 2px solid #fff;
    }
tabs ul li{ background:url(15ta_nyj_tit2_bar.jpg) repeat-x top #ffffff; border-right:1px solid #dddddd; color:#ea5300; text-decoration:none}
.h470{ height:472px;}
</style>

<script type="text/javasript">
window.onload=function(){
    var oTabs=document.getElementById("tabs");
    var oUl=oTabs.getElementsByTagName("ul")[0];
    var oLis=oUl.getElementsByTagName("li");
    var oDDiv=document.getElementById("DDiv");
    var oDivs=oDDiv.getElementsbyTagName("div");

    for(var i=0;i<oLis.length;i++){
        oLis[i].index=i;
        oLis[i].onclick=function(){
            for(var j=0;j<oLis.length;j++){
                oLis[j].className="";
                oDivs[j].className="no";

            }
        oLis[i].className="on";
        oDivs[i].className="";
        };
    }
}

</script>
</head>
<body>
        <div  id="tabs">
            <ul>
                <li class="on">政策文件</li>
                <li>黨務公開</li>
                <li>信息簡報</li>
            </ul>

        <div id="DDiv">
            <div class="on">
                同安區召開生豬屠宰檢疫監管座談會1
                同安區召開生豬屠宰檢疫監管座談會1
            </div>
            <div class="no">
                同安區召開生豬屠宰檢疫監管座談會2
                同安區召開生豬屠宰檢疫監管座談會2
            </div>
            <div class="no">
                同安區召開生豬屠宰檢疫監管座談會3
                同安區召開生豬屠宰檢疫監管座談會3
            </div>
        </div>
        </div>
</body>
</html>

最佳回答:


可以了,不用了

 <!DOCTYPE html>
<html>
<head>
<title>無標題文檔</title>
    <script>
    function show1(){
        document.getElementById("tab1").style.display="block";
        document.getElementById("tab2").style.display="none";
        document.getElementById("tab3").style.display="none";
}
    function show2(){
        document.getElementById("tab1").style.display="none";
        document.getElementById("tab2").style.display="block";
        document.getElementById("tab3").style.display="none";
}
    function show3(){
        document.getElementById("tab1").style.display="none";
        document.getElementById("tab2").style.display="none";
        document.getElementById("tab3").style.display="block";
}
    </script>
</head>
<body>
     <div  id="tabs">
            <ul>
                <li onclick="show1()">政策文件</li>
                <li onclick="show2();">黨務公開</li>
                <li onclick="show3();">信息簡報</li>
            </ul>

        <div id="DDiv">
            <div id="tab1">
                同安區召開生豬屠宰檢疫監管座談會1
                同安區召開生豬屠宰檢疫監管座談會1
            </div>
            <div id="tab2">
                同安區召開生豬屠宰檢疫監管座談會2
                同安區召開生豬屠宰檢疫監管座談會2
            </div>
            <div id="tab3">
                同安區召開生豬屠宰檢疫監管座談會3
                同安區召開生豬屠宰檢疫監管座談會3
            </div>
        </div>
        </div>
  </body>
</html>

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved