頁面Tab切點選切換

2021-07-11 01:15:51 字數 1049 閱讀 2412

.tab_head

.tab_head a

.tab_head_bg

.tab_head_bg img

html部分:

tab1

tab1

tab1

tab2

tab2

tab2

tab3

tab3

tab3

tab4

tab4

tab4

js部分

$(function());

$('.tab2').click(function () )

$('.tab3').click(function () )

$('.tab4').click(function () )

})

.tab_head

.tab_head a

.tab_head_bg

.tab_head_bg img

.hide

html部分:

tab1

tab1

tab1

tab2

tab2

tab2

tab3

tab3

tab3

tab4

tab4

tab4

js部分:

$(function())

})

感覺js部分簡潔多了。

但是目前為止,感覺自己還是侷限於寫這種簡單的效果,稍微複雜一丟丟就找不到頭緒了。

還是缺少專案經驗啊,工作到現在周圍始終都只有我乙個前端,根本無法進步,只能自己乙個人在前端進步路上慢慢摸索了,還是要多寫多寫多寫!

tab切換效果

今天上一套tab切換效果的 就自己實現吧!下面貼html 大體分兩部分,div和按鈕div,很容易看懂 123 45這個還是比較簡單的div結構,下面是對應的css button btn p main pictures 對所有div的簡單布局,最後主要實現功能 所以重要的js 如下 window.o...

Vue實現Tab點選切換取消刪除等功能

今天給大家分享一下本人經常用到的tab切換功能。主要邏輯就是資料的新增和刪除並且判斷樣式。廢話不多說直接上 技術棧div style margin left 25px class tab v for item,index in data key index click overlayselected...

很好用的Tab標籤切換功能,延遲Tab切換。

乙個網頁,tab標籤的切換是常見的功能,但我發現很少有前端工程師在做該功能的時候,會為使用者多想想,如果你覺得滑鼠hover到標籤上,然後切換到相應的內容,就那麼簡單的話,你將是乙個不合格的前端工程師啊,其實你不這樣做,也無傷大雅,但是作為前端的工程師,我們可以為使用者做到更好。想想如果乙個網頁上,...