JavaScript實現(xiàn)Tab點擊切換

更新時間：2022年07月12日 10:46:24 作者：寧寧寧兒~

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)Tab點擊切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Tab 選項卡切換效果在現(xiàn)如今的網(wǎng)頁中，運用的也是比較多的，包括點擊切換、滑動切換、延遲切換、自動切換等多種效果，在這篇博文里，我們是通過原生 Jquery 來實現(xiàn) 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_box" >
? ? ? ? ? ? ? ? <h3 class="gw_box_tit">666</h3>
? ? ? ? ? ? </div>
? ? ? ? </div>
</div>

css

*{
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? li{
? ? ? ? ? ? list-style: none; ?
? ? ? ? }
? ? ? ? .gw_b_tab{
?? ?color: #333333;
?? ?width: 240px;
?? ?height: 490px;
?? ?background: #FFFFFF;
?? ?border-radius: 8px;
?? ?overflow: hidden;
?? ?overflow-y: hidden;
}
.gw_b_item{
?? ?height: 82px;
? ? padding: 0 22px;
? ? position: relative;
? ? font-size: 16px;
? ? line-height: 80px;
?? ?text-align: center;
? ? cursor: pointer;
?? ?border-radius: 8px;
? ? font-weight: bold;
? ? white-space: nowrap;
}
.gw_b_box{
?? ?/* display: none; */
? ? width: 880px;
?? ?position: absolute;
?? ?right: 0;
?? ?top: 0;
? ? display: none;
? ? background: #FB6638;
? ? height: 490px;
? ? border-radius: 30px;
}
.gw_b_item2{
?? ?background-color: #FB6638;
?? ?color: #fff;
}
.gw_box_tit{
?? ?height: 48px;
? ? line-height: 48px;
? ? font-size: 24px;
? ? color: #ffffff;
? ? margin-bottom: 18px;
? ? text-align: center;
}

js

<script src="/static/js/jquery-1.11.3.min.js"></script>
<script>
? ? $(function () {
? ? ? ? $("#left .gw_b_item").click(function () {
? ? ? ? ? ? var index = $(this).index();
? ? ? ? ? ? $(".gw_b_box").eq(index).show();
? ? ? ? ? ? $(this).addClass('gw_b_item2')
? ? ? ? ? ? // :eq() 選擇器選取帶有指定 index 值的元素。
? ? ? ? ? ? $(".gw_b_box").eq(index).siblings().hide();
? ? ? ? ? ? $(this).siblings().removeClass('gw_b_item2')
? ? ? ? })
? ? })
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: