Frankjunyu 2015-12-30 03:48 采纳率: 58.8%
浏览 1430

Web标签切换效果出不来,大神救命

想用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>

  • 写回答

3条回答 默认 最新

  • ITDragon龙 2015-12-30 04:50
    关注

    三个标签一个显示,两个隐藏,鼠标滑过时切换就可以了;参考一下这个吧:http://blog.csdn.net/wangxiaohui6687/article/details/8523079

    评论

报告相同问题?

悬赏问题

  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥20 为什么我写出来的绘图程序是这样的,有没有lao哥改一下
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥200 关于#c++#的问题,请各位专家解答!网站的邀请码
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
  • ¥15 错误 LNK2001 无法解析的外部符号