jQuery實戰 tab欄切換

2021-08-20 22:40:16 字數 677 閱讀 9867

jquery實現tab欄切換

html結構:

class="active">第一欄li>

第二欄li>

第三欄li>

第四欄li>

ul>

class="content">

class="tab selected">我是第一欄的內容div>

class="tab">我是第二欄的內容div>

class="tab">我是第三欄的內容div>

class="tab">我是第四欄的內容div>

div>css:

.active

.content

.selected

//active 用來顯示下劃線

//selected 用來控制顯示(預設都是隱藏的)

js:

$(function

()) });

和原生js一樣利用排他思想。

效果:

tab欄切換布局

案例分析 1.tab欄切換有兩個大的模組 2.上面是模組選項卡,點選某乙個,當前的底色為紅色,其餘不變 排他思想 用修改雷鳴的方式 3.下面的模組內容,會跟隨上面的選項卡變化,所以下面的模組變化需要寫到點選事件裡面 4.規律 下面的模組顯示內容和上面的選項卡意義對應相匹配 5.核心思路 給上面的ta...

tab欄切換操作

最近在學js核心技術dom,順便寫寫筆記,記錄一下自己的學習成果。今天要記錄的是乙個比較常見的案例,就是切換,用的排他思想,首先我們看看所要達成的效果 點選售後保障出現售後保障的介面,點選商品評價,出現商品評價的模組。然後我們看看流程 商品介紹 li 41 li 規格與包裝 li 42 li 售後保...

tab欄切換 js案例

tab欄切換 js案例 商品介紹li class select 規格與包裝li class select 售後保障li class select 商品評價 5000 li class select 手機社群li class content class demo style display block...