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