Tab切换--JavaScript基础

àì夳堔傛蜴生んèń 2022-06-10 05:29 85阅读 0赞

## Tab切换–JavaScript基础 ##

一个网页需要有三个必不可缺的部分，HTML、CSS、JS，本文和大家分享一个JS的基本知识–Tab切换。  
先看看Tab切换达到的效果：  
![这里写图片描述][SouthEast]

首先我们要编写html结构内容；

<ul id="btn" class="btn">
            <li class="active">tab-1</li>
            <li>tab-2</li>
            <li>tab-3</li>
        </ul>
        
        <div id="content" class="content">
            <div class="box1 show">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
        </div>

其次我们要渲染CSS样式：

li{ list-style:none; }
        .btn{ overflow:hidden; }
        .btn li{ float:left; width:100px; height:30px; line-height:30px; margin-right:30px; text-align:center; cursor:pointer; background:#ccc; }
        .btn li.active{ background:blue; }
        .content{ width:400px; height:300px; line-height:300px; margin-left:20px; text-align:center; border:2px solid blue; font-size:80px; color:blue; }
        .content div{ display:none; }
        .content div.show{ display:block; }

关键部分，我们使用JS实现Tab切换效果：

我们通过JS代码，就可实现Tab切换，当然，实现这一效果的代码有很多种，希望本博文能够给大家带来帮助。

[SouthEast]: /images/20220610/607cb529896e49bdbab0d97e5438013b.png