选项卡很二感觉慢慢改进

最新推荐文章于 2024-07-12 10:43:17 发布

babing8893

最新推荐文章于 2024-07-12 10:43:17 发布

阅读量146

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LFmadongsheng/p/8261093.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding:0;
        }
        #wrap{
            /*border: 1px solid blue;*/
        }
        ul{
            text-align: center;
            list-style-type: none;
            /*border: 2px solid #aaa;*/
            /*display: inline-block;*/
            margin-top: 30px;

        }
        li{
            display: inline-block;
            /*border: 1px solid red;*/
            background: #ddee11;
        }
        #wrap div{
            margin: 0 auto;
            width: 300px;
            height: 300px;
            background: #eee;
            color: #e4393c;
            line-height: 300px;
            text-align: center;
            margin-bottom: 10px;
            margin-top: 10px;
            border-radius: 5px;
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }

    </style>
</head>
<body>
    <div id='wrap'>
        <ul>
            <li>我是谁</li>
            <li>我在哪</li>
            <li>我要干吗</li>
            <li>Hello</li>
        </ul>
        <div class="show">我是牛逼红红的XXX</div>
        <div class="hide">我在中国一个叫做杭州的城市</div>
        <div class="hide">我正在写着我也不知道干嘛用的程序</div>
        <div class="hide"> world</div>
    </div>    
    <script  type="text/javascript" charset="utf-8" async defer>


        var   wrap = document.getElementById('wrap');
        var   divs = document.querySelectorAll('#wrap>div');
        // console.log(divs.length);
        var   ul =document.querySelector('ul');
        // console.log(ul);
        var   lis = document.querySelectorAll('li');
//事件监听方式
        ul.addEventListener('click',function(e){
            // e.target.style.class='show';
            // console.log(e.target.innerHTML);
            for(var i=0;i<divs.length;i++){
                divs[i].style.display="none";

            }
            if(e.target.innerHTML=="我是谁"){
                divs[0].style.display='block'
            }else if(e.target.innerHTML=="我在哪"){
                divs[1].style.display='block'
            }else if(e.target.innerHTML=="我要干吗"){
                divs[2].style.display='block'
            }else if(e.target.innerHTML=="Hello"){
                divs[3].style.display='block'
            }



        })


    </script>
</body>
</html>

虽然说功能可以实现，但是感觉很繁琐 尤其是下面的切换竟然用到if ...else 的层层嵌套，感觉很不舒服。慢慢找的改进 这是第一次的

上面的是用了下事件监听的方式写的  换成点击的我发现就可以少很多代码

// 点击事件
for(var i=0;i<lis.length;i++){
　　lis[i].index=i;
　　lis[i].οnclick=function(){
　　　　for(var j=0;j<divs.length;j++){
　　　　divs[j].style.display="none";
　　　　}
　　　　divs[this.index].style.display="block";
　　}
}

用监听的方式能得到元素节点,却不知道怎么获取到他的下标 (可以得到整个li,但是不知如何获取li的下标,这就导致我用了if...else...这种体力操作)

转载于:https://www.cnblogs.com/LFmadongsheng/p/8261093.html

babing8893

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡很二感觉慢慢改进

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导航条</title> <style type="text/css" media="screen"> *{...
复制链接

扫一扫