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

weixin_53240790

于 2020-12-13 22:54:29 发布

阅读量264

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_53240790/article/details/111146521

版权

本文介绍了前端开发中利用排他思想来完成tab栏切换的方法。首先解释了排他思想的概念，即在鼠标滑过时将class赋予当前元素，通过for循环移除其他元素的class，实现tab的显示与隐藏。接着详细阐述了实现该功能的两个关键步骤：引入class名和进行属性名切换与去值的操作。

摘要由CSDN通过智能技术生成

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