为了账号安全,请及时绑定邮箱和手机立即绑定

各位大哥!帮忙看一下是哪里不对?为什么点击li没有响应?多谢!!

各位大哥!帮忙看一下是哪里不对?为什么点击li没有响应?多谢!!


<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>实践题 - 选项卡</title>

    <style type="text/css">

     /* CSS样式制作 */  

        *{margin:0; padding:0; font-size:15px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋体";}

        ul{ list-style-type:none}

        

        .tab{ width:300px; height:190px; margin:20px auto;} 


        .ul1{border-bottom: 2px solid #8B4513;height: 32px;}

        .ul1 li{ display:inline-block; width:60px; line-height:30px; border:1px solid #999; border-bottom:none; text-align:center; margin-left:5px;}

        .ul1 li:hover{ cursor: pointer;}

        .ul1 li.action{ border-top:2px solid #8B4513;border-bottom: 2px solid #FFF;}

 

        .tab div{border: 1px solid #7396B8;border-top: none;}

        .tab div li{height: 30px;line-height: 30px;text-indent: 8px;}

        

        .hide{ display:none;}

        .show{ display: block;}

    </style>

    <script type="text/javascript">

         

    // JS实现选项卡切换

    window.onload = function() {

        var oli = document.getElementById("ul1");

        var aLi = oli.getElementsByTagName("li");

        var oDiv = document.getElementById("tab");

        var aDiv = oDiv.getElementsByTagName("div");

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

            aLi[i].index = i;

            aLi[i].onclick = function() {

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

                    aLi[i].className = "";

                }

                this.className = "action";

                for(var j = 0; j < aDiv.length; j++) {

                    aDiv[j].className = "hide";

                }

                aDiv[this.index].className = "show";

            }        

        }

    }    

    </script>

</head>


<body>

<!-- HTML页面布局 -->

<div>

    <ul>

        <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>40平出租屋大改造 美少女的混搭小窝</li>

            <li>经典清新简欧爱家 90平老房焕发新生</li>

            <li>新中式的酷色温情 66平撞色活泼家居</li>

            <li>瓷砖就像选好老婆 卫生间烟道的设计</li>

        </ul>

    </div>

</div>

</body>

</html>

正在回答

2 回答

document.getElementById("ul1"),没看见一个id为为“ul1”的啊,那个tab啥的也没有吧,你给父元素添加个id吧

1 回复 有任何疑惑可以回复我~
#1

czx陈先森 提问者

十分感谢!我忘了我设置的是class不是id!!我还自己弄了好久都没发现^O^
2015-06-07 回复 有任何疑惑可以回复我~

你的ul,tab都没有命名啊,getEementById是用来找id节点的所以你的js不起作用

你可以看看这个简易选项卡代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.active{background: yellow;}

div{border:1px solid red;width: 200px;height: 100px;}

.show{display: block;}

.hide{display: none;}

</style>

<script>

window.onload=function(){

var oInput=document.getElementsByTagName('input');

var oDiv=document.getElementsByTagName('div');

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

oInput[i].index=i;

oInput[i].onclick=function(){

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

oInput[i].className='';

oDiv[i].className='hide';

this.className='active';

oDiv[this.index].className='show';

}

}

}

}

</script>

</head>

<body>

<input type="button"value="1">

<input type="button" value="2">

<input type="button" value="3">

<div>this is the one content</div>

<div>this is the two content</div>

<div>this is the three content</div>

</body>

</html>


1 回复 有任何疑惑可以回复我~
#1

czx陈先森 提问者

恩恩~非常感谢!我忘记了我设置的是class,没有设置id!
2015-06-07 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

各位大哥!帮忙看一下是哪里不对?为什么点击li没有响应?多谢!!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信