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

鼠标点到那个上面,那个就显示出来,其他的隐藏起来

https://img4.mukewang.com/5b2124b90001128811790707.jpg
下面是我写的代码:<!doctype html>
<html>
    <head>
        <title>TAB</title>
        <style type="text/css">
            *{padding:0;margin:0;}
            body{width:1000;margin:0 auto;}
            #box{width:976px;margin:0 auto;border:2px solid red;}
            #menu{width:956px;margin:0 auto;}
            #menu ul{list-style:none;}
            #menu ul li{width:191px;height:50px;line-height:50px;font-size:30px;color:black;text-align:center;float:left;}
            #box .cos{width:952px;height:600px;border:2px solid #0f0;margin:0 auto;display:none;margin-top:60px;margin-bottom:10px;font-size:30px;color:red;}
        </style>
        <script type="text/javascript">
            window.onload = function(){
                //抓取元素
                var boxObj = document.getElementById('box');
                var liObj = document.getElementsByTagName('li');
                var cosObj = document.getElementsByClassName('cos');
                for(var i=0;i<liObj.length;i++){
                    liObj[i].onclick = function(){
                    for(var j=0;j<liObj.length;j++){
                        liObj[j].style.color='black';
                        cosObj[j].style.display='block';
                    }
                    this.style.color='red';
                    cosObj[i].style.display='none';
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="box">
            <div id="menu">
                <ul>
                    <li style="color:red;">衣柜</li>
                    <li>空调</li>
                    <li>服装</li>
                    <li>电器</li>
                    <li>厨房</li>
                </ul>
            </div>
            <div class="cos" style="display:block;">衣柜</div>
            <div class="cos">空调</div>
            <div class="cos">服装</div>
            <div class="cos">电器</div>
            <div class="cos">厨房</div>
        </div>
    </body>
</html>

添加回答

5回答
已采纳
编辑回答
你哪一块实现不了?现在都隐藏了是吧?
需要显示?
设置点击的事件触发style.display为block就行了其他所有的在重置为display为none
现在问题来了~怎么判断应该显示哪个?
<div id="menu">
                <ul>
                    <li style="color:red;">衣柜
                              <ul class="cos" style="display:block;">衣柜</ul>                    </li>
                    <li>空调</li>
                </ul>
</div>我一般这样写,this.firstElementChild.style.display这样来选中它,而且你是给li加的点击,正好适用.你试试看其实用css也有办法写出来~感觉css比js节约点系统资源吧~~
反对 0个回复 4天前
你还没有登录,请先登录注册慕课网帐号
回复
编辑回答
$("选择器名称").click(function(){var q=$(this).index();$('选择器名称').eq(q).show().siblings('选择器名称').hide();})
1 反对 0个回复 4天前
你还没有登录,请先登录注册慕课网帐号
回复
编辑回答
你说的是真的嘛?
反对 0个回复 4天前
你还没有登录,请先登录注册慕课网帐号
回复
编辑回答
你说的是真的嘛?
反对 0个回复 4天前
你还没有登录,请先登录注册慕课网帐号
回复
编辑回答
F12之后会有代码窗口出现。上边有一个小放大镜。点一下就实现了
反对 0个回复 4天前
你还没有登录,请先登录注册慕课网帐号
回复
举报
0/150
提交
取消
意见反馈 常见问题 APP下载
官方微信
hv128