最簡單的tab切換實例代碼

更新時間：2016年05月13日 08:53:17 投稿：jingxian

下面小編就為大家?guī)硪黄詈唵蔚膖ab切換實例代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

JS：

$(".con").eq(0).show();
  $(".btn span").click(function(){
    var num =$(".btn span").index(this);
    $(".con").hide();
    $(".con").eq(num).show().slblings().hide();
  })

CSS：

body { cursor:default; -webkit-text-size-adjust:none; font-size:12px; font-family:Arial; background:#FFF; }
.clear { zoom:1; }
.clear:after { visibility:hidden; display:block; font-size:0; content:"1"; clear:both; height:0; }
.main { width:500px; margin:20px auto; }
.btn span { width:35px; text-align:center; color:#fff; background:#f00; cursor:pointer; margin:0 5px; display:block; float:left; }
.con { display:none; border:#033 1px solid; height:100px; width:200px; }

HTML：

<div class="main">
 <div class="btn clear"><span>1</span><span>2</span><span>3</span></div>
 <div class="con">第一個<br /> </div>
 <div class="con">第二個<br /> </div>
 <div class="con">第三個<br /> </div>
</div>

截圖

以上這篇最簡單的tab切換實例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

tab
切換

迅速了解一下ES10中Object.fromEntries的用法使用
這篇文章主要介紹了迅速了解一下ES10中Object.fromEntries的用法使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
游戲開發(fā)中如何使用CocosCreator進行音效處理
這篇文章主要介紹了游戲開發(fā)中如何使用CocosCreator進行音效處理，并對音效組件進行封裝，方便以后使用，同學們看完之后，一定要親手實驗一下
2021-04-04
Javascript點擊按鈕隨機改變數(shù)字與其顏色
這篇文章主要介紹了Javascript點擊按鈕隨機改變數(shù)字和其字體的顏色，實現(xiàn)后的效果很不錯，具有一定的參考價值，有需要的可以參考借鑒，下面來一起看看。
2016-09-09
JavaScript 學習筆記（七）字符串的連接
javascript 字符串的連接效率問題，需要的朋友可以參考下。
2009-12-12
JS正則表達式修飾符global(/g)用法分析
這篇文章主要介紹了JS正則表達式修飾符global(/g)用法,結(jié)合實例形式分析了JS全局匹配修飾符/g的功能、使用方法與相關注意事項,需要的朋友可以參考下
2016-12-12
JavaScript數(shù)據(jù)類型轉(zhuǎn)換的注意事項
JavaScript是一種無類型語言，但同時JavaScript提供了一種靈活的自動類型轉(zhuǎn)換的處理方式?；疽?guī)則是，如果某個類型的值用于需要其他類型的值的環(huán)境中，JavaScript就自動將這個值轉(zhuǎn)換成所需要的類型。
2016-07-07
js實現(xiàn)櫥窗展示效果
這篇文章主要為大家詳細介紹了js實現(xiàn)櫥窗展示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-01-01
取得元素的左和上偏移量的方法
利用offsetParent屬性在Dom層次中逐級向上回溯，將每個層次偏移量合計,需要的朋友可以參考下
2014-09-09
基于Typescript與Axios的接口請求管理詳解
接口是一系列抽象方法的聲明,是一些方法特征的集合,這些方法都應該是抽象的,需要由具體的類去實現(xiàn),然后第三方就可以通過這組抽象方法調(diào)用,讓具體的類執(zhí)行具體的方法,這篇文章主要給大家介紹了基于Typescript與Axios的接口請求管理的相關資料,需要的朋友可以參考下
2021-09-09
javascript實現(xiàn)自由編輯圖片代碼詳解
這篇文章主要介紹了javascript實現(xiàn)自由編輯圖片代碼詳解，在當下的的前端項目中，圖片功能可以說是非常常見的，圖片的展示、圖片的裁剪編輯、圖片的上傳等，那么我們的項目便來了個需求。,需要的朋友可以參考下
2019-06-06