JavaScript实现Tab点击切换

王子 · 2022-10-21 15:40:01

Tab 选项卡切换效果在现如今的网页中，运用的也是比较多的，包括点击切换、滑动切换、延迟切换、自动切换等多种效果，在这篇博文里，我们是通过原生 Jquery 来实现 Tab 点击切换的效果
例如：

html

<body>
<div style="position: relative;margin-top: 56px;display: flex;justify-content: space-between;width: 1200px;" id="left">
<ul class="gw_b_tab">
<li class="gw_b_item gw_b_item2">111</li>
<li class="gw_b_item">222</li>
<li class="gw_b_item">333</li>
<li class="gw_b_item">444</li>
<li class="gw_b_item">555</li>
<li class="gw_b_item">666</li>
</ul>
<div>
<div class="gw_b_box" style="display: block;">
<h3 class="gw_box_tit">111</h3>
</div>
<div class="gw_b_box" >
<h3 class="gw_box_tit">222</h3>
</div>
<div class="gw_b_box">
<h3 class="gw_box_tit">333</h3>
</div>
<div class="gw_b_box" >
<h3 class="gw_box_tit">444</h3>
</div>
<div class="gw_b_box">
<h3 class="gw_box_tit">555</h3>
</div>
<div class="gw_b_bo" >
<h3 class="gw_box_tit">666</h3>
</div>
</div>
</div>

复制代码

css

复制代码

js

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。

[前端] JavaScript实现Tab点击切换