Frankjunyu 2015-12-30 05:44 采纳率: 58.8%
浏览 1426
已采纳

求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>
  • 写回答

7条回答 默认 最新

  • 乐古 2015-12-30 06:45
    关注

    可以了，不用了

     <!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题？

悬赏问题

  • ¥15 (SQL语句|查询结果翻了4倍)
  • ¥15 Odoo17操作下面代码的模块时出现没有'读取'来访问
  • ¥50 .net core 并发调用接口问题
  • ¥15 网上各种方法试过了，pip还是无法使用
  • ¥15 用verilog实现tanh函数和softplus函数
  • ¥15 Hadoop集群部署启动Hadoop时碰到问题
  • ¥15 求京东批量付款能替代天诚
  • ¥15 slaris 系统断电后，重新开机后一直自动重启
  • ¥15 QTableWidget重绘程序崩溃
  • ¥15 谁能帮我看看这拒稿理由啥意思啊阿啊