用事件冒泡事件实现选项卡的切换

最新推荐文章于 2022-05-11 15:57:25 发布

东哥爱编程

最新推荐文章于 2022-05-11 15:57:25 发布

阅读量265

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/monk96/article/details/83384978

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

通常我们会在日常的网站开发中实现选项卡的功能，其实这个功能用事件冒泡很容易实现，而且实现起来的复杂度比用for()循环遍历来的简单。代码为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>
    <style>
        /* //清空默认的边距 */
    *{
        margin: 0;
        padding: 0;
    }
    .show{
        height: 300px;
        width: 600px;
        border: 1px solid black;
        margin: 100px auto 0px auto;
        display: none;
    }
    div:first-child{
        display: block;
    }
    .tab{
        height: 100px;
        width: 600px;
        border: 1px solid black;
        margin: 0px auto  ;

    }
    .tab ul li{
        height: 100px;
        width: 33.2%;
        text-align: center;
        background: yellow;
        list-style: none;
        float: left;
        border-right: 1px solid black;
        cursor: pointer;
    }
    .tab ul li:last-child{
        border-right:none;
    }
    </style>
</head>
<body>
    <div class="show">
        这里是展示区域1
    </div>
    <div class="show">
        这里是展示区域2
    </div>
    <div class="show">
        这里是展示区域3
    </div>
    <div class="tab">
        <ul>
            <li class="li">tab1</li>
            <li  class="li">tab2</li>
            <li  class="li">tab3</li>
        </ul>
    </div>
    <script>
    window.onload=function(){

        var $tab=document.getElementsByClassName('tab')[0];
        var li=document.getElementsByClassName('li');//tab选择的内容
        for(var i=0;i<li.length;i++){
            li[i].index=i;
        }
        var show=document.getElementsByClassName('show');  //显示的内容
        for(var i=0;i<show.length;i++){
            show[i].index=i;
        }
        var last_one=0;//定义最后显示的模块index
        $tab.onclick=function(e){
            var e=e||window.e;
            var target=e.target||e.srcElement;//找到目标
            if(target.className==='li'){ 
                show[last_one].style.display='none';//最后一个显示的设置为不显示
                show[target.index].style.display='block';//当前的设置为显示
                last_one=target.index;
                
            }
        }
    }
    </script>
</body>
</html>

东哥爱编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
用事件冒泡事件实现选项卡的切换

通常我们会在日常的网站开发中实现选项卡的功能，其实这个功能用事件冒泡很容易实现，而且实现起来的复杂度比用for()循环遍历来的简单。代码为例：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport&quot
复制链接

扫一扫