能套用的tab欄切換

2022-03-11 01:41:59 字數 560 閱讀 7977

效果:

在style.js檔案裡封裝了乙個show函式,有4個引數,di(當前點選的按鈕),num(按鈕個數,也可以說是下面具體內容個數),divn(乙個id字首,這個例子裡是ta,),active(當前按鈕的類名,可控制不同於其他按鈕的個性樣式),

按鈕有不同id,第乙個叫ta0,第二個ta1...,滑鼠劃入時觸發show函式,傳入不同的引數,js檔案裡先獲取到當前按鈕,給他加上個性類名active(current),再獲取下面的對應內容區域,給他顯示,接下來就要處理那些滑鼠沒劃入,這裡用乙個for迴圈和判斷解決,「di!=i」,確保剔除掉當前按鈕和內容,其他的就去掉個性類名current和內容不顯示了。(可以實現多個按鈕切換,也可同理編寫點選事件)。

tab欄切換布局

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

tab欄切換操作

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

jQuery實戰 tab欄切換

jquery實現tab欄切換 html結構 class active 第一欄li 第二欄li 第三欄li 第四欄li ul class content class tab selected 我是第一欄的內容div class tab 我是第二欄的內容div class tab 我是第三欄的內容div...