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

---

前端：利用排他思想完成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')