                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

切换程序那里有什么问题吗，为什么切换不了(为什么这样改就可以了）

<script type="text/javascript">

    var ul=document.getElementsByTagName("ul")[0];
    var li=ul.getElementsByTagName("li");
    var divv=document.getElementsByTagName("div")[0];
    var div=divv.getElementsByTagName("div");

    for(var i=0;i<li.length;i++){

        li[i].onmouseover=function(){
            for(var j=0;j<div.length;j++){
                div[j].className="hide"
            }
            div[i].className="show";
        }
    }
    </script>

--------------------------------改成下面的就可以-----------------------------------

window.onload=function(){
    var ul=document.getElementById("ul1");
    var li=ul.getElementsByTagName("li");
    var divv=document.getElementById("body");
    var div=divv.getElementsByTagName("div");

    for(var i=0;i<li.length;i++){
        li[i].index=i;
        li[i].onmouseover=function(){
            for(var j=0;j<div.length;j++){
                div[j].className="hide"
            }
            div[this.index].className="show";
        }
    }

}

AaronWell

2016-12-02

源自：JavaScript进阶篇 10-1

关注问题我要回答

659

操作

收起

1 回答

AaronWell 提问者
2016-12-02

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */
     *{
         margin:0;
         padding:0;
         font:normal 12px "微软雅黑";
         color:#000000;
     }
     .hide{display:none;}
     .show{display:block;}
     ul{list-style-type:none}
     #ul1{
         border-bottom: 2px solid #8B4513;
         height: 32px;
     }
     #ul1 li{
         display: inline-block;
         width: 60px;
         line-height:32px;
         text-align: center;
         border: 1px solid #999;
         border-bottom: none;
         margin-left: 5px;
     }
     #body{
         width:275px;
         margin:20px auto;
     }
     #body div{
         border:1px solid #7396B8;
         border-top:none;
     }
     #body div li{
         height:30px;
         line-height:30px;
         text-indent:8px;
     }

    </style>
    <script type="text/javascript">
    // JS实现选项卡切换

var ul=document.getElementsByTagName("ul")[0];
    var li=ul.getElementsByTagName("li");
    var divv=document.getElementsByTagName("div")[0];
    var div=divv.getElementsByTagName("div");

    for(var i=0;i<li.length;i++){

        li[i].onmouseover=function(){
            for(var j=0;j<div.length;j++){
                div[j].className="hide"
            }
            div[i].className="show";
        }
    }
    </script>

</head>
<body>

<div id="body">
    <ul id="ul1">
     <li>房产</li>
     <li>家具</li>
     <li>二手房</li>
    </ul>
    <div>
        <ul>
         <li>275万购昌平邻铁三居总价20万买一居</li>
         <li>200万内购五环三居 140万安家东三环</li>
         <li>北京首现零首付楼盘 53万购东5环50平</li>
         <li>京楼盘直降5000 中信府公园楼王现房</li>
        </ul>
    </div>
    <div>
        <ul>
         <li>40平出租屋大改造美少女的混搭小窝</li>
         <li>经典清新简欧爱家 90平老房焕发新生</li>
         <li>新中式的酷色温情 66平撞色活泼家居</li>
         <li>瓷砖就像选好老婆卫生间烟道的设计</li>
        </ul>
    </div>
    <div>
        <ul>
         <li>通州豪华3居260万二环稀缺2居250w甩</li>
         <li>西3环通透2居290万 130万2居限量抢购</li>
         <li>黄城根小学学区仅260万 121平70万抛!</li>
         <li>独家别墅280万苏州桥2居优惠价248万</li>
        </ul>
    </div>
</div>
</body>
</html>

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

JavaScript进阶篇

参与学习 468189 人
解答问题 21891 个

本课程从如何插入JS代码开始，带您进入网页动态交互世界

本课相似问答

2 回答求大神指教：为什么切换不了？

1 回答请问为什么切换不成功

2 回答为什么点击以后没有切换啊

1 回答为什么我实现不了切换功能呢？

2 回答选项卡切换以后，为什么内容消失了

搜索更多本课相关问答

切换程序那里有什么问题吗，为什么切换不了(为什么这样改就可以了）

我要回答关注问题

意见反馈帮助中心 APP下载