用JavaScript來實現Tab點擊切換

3403771864 發布于2022-10-24 21:40 / 479人閱讀

　　現在很多都用到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_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;
　　}

　　<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>

GPU云服務器云服務器 js實現tab切換 javascript_tab切換 javascript實現tab tab切換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128200.html

用React實現點擊切換的標簽頁

摘要：四總結上面一系列的操作最終的結果都需要用來反應出來，所以關鍵點是如何在中使用來動態生成接下來的改進實現可以滑動的標簽頁一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何實現既然用React寫，那么它就必然是一個組件，首先考慮你怎么使用這個組件，也就是這個組件的接口是怎么樣的。 ...

xushaojieaaa 2019-08-22 10:59 評論0 收藏0
用React實現點擊切換的標簽頁

摘要：四總結上面一系列的操作最終的結果都需要用來反應出來，所以關鍵點是如何在中使用來動態生成接下來的改進實現可以滑動的標簽頁一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何實現既然用React寫，那么它就必然是一個組件，首先考慮你怎么使用這個組件，也就是這個組件的接口是怎么樣的。 ...

codeKK 2019-08-01 15:00 評論0 收藏0
每日 30 秒 ? 扼住焦點的喉嚨

簡介無障礙、HTML 小細節、焦點、a11y、Accessibility、框架選擇無障礙開發還是應該從 HTML 開始聊起，無論是盲人閱讀器還是瀏覽器等工具最核心的部分還是在 HTML，畢竟沒了 CSS 只是不美觀了，沒了 JavaScript 只是少了交互和無限擴展的可能性。有的同學會說了產品和老板拿著鞭子在后頭趕馬車哪里有時間寫這些。現實是這樣的，但是在選擇UI框架的時候可以選擇無障礙...

antyiwei 2019-08-23 16:54 評論0 收藏0
JavaScript 基礎知識 - DOM篇(一)

摘要：前言本篇文章是基礎知識的篇，如果前面的基礎知識入門篇看完了，現在就可以學習了。基本概念分為三個部分。在這個基礎上使用一些新特性，高級瀏覽器支持，低級瀏覽器不支持。在對象中的屬性是一個布爾值，只有和。 showImg(https://segmentfault.com/img/remote/1460000012581493?w=1920&h=1080); DOM 前言本篇文章是JavaS...

cuieney 2019-08-22 13:40 評論0 收藏0
用純css實現Tab切換

摘要：所以當我們思考能否用來實現時還應考慮到的結構，能不能構造出滿足已存在的選擇器的布局。用來實現的好處就是可以盡量大的把組件功能和業務邏輯分離開來，真正做一個組件該做的事，希望越來越好我們今天用css來實現一個常見的tab切換效果查看原文可以有更好的排版效果哦先看效果 https://codepen.io/xboxyan/pe... 前言哪些簡單的效果可以考慮用css來實現呢，目前...

hizengzeng 2019-08-30 15:54 評論0 收藏0