前端：利用排他思想完成tab栏切换

程序员文章站 2022-06-19 15:50:33

前端：利用排他思想完成tab栏切换一、排他思想是什么？示例：在鼠标滑过时，将class名赋给当前鼠标划过的tab栏，使其tab栏出现，for循环内的class名取消,从而实现让其他的tab隐藏二、使用步骤1.引入class名代码如下（示例）：

体育娱乐....

前端：利用排他思想完成tab栏切换

一、排他思想是什么？

示例：在鼠标滑过时，将class名赋给当前鼠标划过的tab栏，使其tab栏出现，for循环内的class名取消,从而实现让其他的tab隐藏

二、使用步骤

1.引入class名

代码如下（示例）：

 <div class="hd" id="hd">
            <span class="current">体育</span>
            <span>娱乐</span>
            <span>新闻</span>
            <span>综合</span>
        </div>
        <div class="bd" id="bd">
            <div class="current">我是体育模块</div>
            <div>我是娱乐模块</div>
            <div>我是新闻模块</div>
            <div>我是综合模块</div>
        </div>

2.属性名切换和去值

代码如下（示例）：

<script>
 var hd = document.getElementById('hd')
        var spans = hd.getElementsByTagName('span')//获取标签属性名
        var bd = document.getElementById('bd')获取标签id
        var divs = bd.getElementsByTagName('div')//获取标签属性名
        for (var i = 0; i < spans.length; i++) {
        spans[i].setAttribute('index', i)//在tab栏里添加属性，为下文中div获取i的值做铺垫
            spans[i].onmouseover = function () {//鼠标滑过每个tab栏时的事件
                for (var i = 0; i < spans.length; i++) {
                    spans[i].className = '' //使其他class名不需要赋值
                }
                this.className = 'current'//鼠标划过当前tab栏时为其赋上class名从而改变改变背景色
                for (var i = 0; i < divs.length; i++) {
                    // console.log(divs[i])
                    divs[i].className = '' //使其他class名不赋值，从而使框隐藏
                }
                var index = parseInt(this.getAttribute('index'));//获取i的值使其下面的框随着上面Tab栏同时切换
                divs[index].className = 'current';
       //鼠标划过当前tab栏时为其赋上class名从而使其下面的框的内容出现
            }
        }
</script>
这是源码:
<font color=#999AAA > <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        .box {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }

        .hd {
            height: 45px;
        }

        .hd span {
            display: inline-block;
            width: 90px;
            background-color: pink;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }

        .hd span.current {
            background-color: purple;
        }

        .bd div {
            height: 255px;
            background-color: purple;
            display: none;
        }

        .bd div.current {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="hd" id="hd">
            <span class="current">体育</span>
            <span>娱乐</span>
            <span>新闻</span>
            <span>综合</span>
        </div>
        <div class="bd" id="bd">
            <div class="current">我是体育模块</div>
            <div>我是娱乐模块</div>
            <div>我是新闻模块</div>
            <div>我是综合模块</div>
        </div>
    </div>
    <script>
        var hd = document.getElementById('hd')
        var spans = hd.getElementsByTagName('span')
        var bd = document.getElementById('bd')
        var divs = bd.getElementsByTagName('div')
        for (var i = 0; i < spans.length; i++) {
            spans[i].setAttribute('index', i)
            spans[i].onmouseover = function () {
                for (var i = 0; i < spans.length; i++) {
                    spans[i].className = ''
                }
                this.className = 'current'
                for (var i = 0; i < divs.length; i++) {
                    // console.log(divs[i])
                    divs[i].className = ''
                }
                var index = parseInt(this.getAttribute('index'));
                divs[index].className = 'current';

            }
        }
    </script>

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

# 总结
<font color=#999AAA >提示：这里对文章进行总结：
1.利用排他思想实际就是动态添加和除去属性名从而使其实现想达到的效果.
2.绑定index值为下文divs获取i的值做铺垫，让其数组索引和spans同步，从而达到鼠标滑过tab栏时，方框内容随之改变.
3,里面第二个for循环是为了除去外部的current的class名。

本文地址：https://blog.csdn.net/weixin_53240790/article/details/111146521