<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
.tab
ul li
.current
.item
<
/style>
<
/head>
="tab"
>
="tab_list"
>
="current"
>商品介紹<
/li>
規格與包裝<
/li>
售後保障<
/li>
商品評價
(5000
)<
/li>
手機社群<
/li>
<
/ul>
<
/div>
="tab_con"
>
="item" style=
"display: block;"
>
商品介紹模組內容
<
/div>
="item"
>
規格與包裝模組內容
<
/div>
="item"
>
售後保障模組內容
<
/div>
="item"
>
商品評價模組內容
<
/div>
="item"
>
手機社群模組內容
<
/div>
<
/div>
<
/div>
var lis = document.
queryselectorall
('li');
var items = document.
queryselectorall
('.item');
for(
var i =
0; i < lis.length; i++
)//給當前li加上樣式
this
.classname =
'current'
//得到自定義樣式
var index =
this
.getattribute
('index');
//排他法 將每個item樣式都隱藏
for(
var i =
0; i < items.length; i++
)//利用自定義樣式 將對應的li display設為block
items[index]
.style.display =
'block'}}
<
/script>
<
/body>
<
/html>
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...
純css實現tab切換
所用技術有 css選擇器 相鄰兄弟選擇器 element element 用於選取第乙個指定的元素之後的緊跟的元素，該元素是被選取元素的兄弟 不是內部 element1 element2 它可以element1之後所有的element2 兩元素必須擁有相同父元素，但是element2不必直接緊隨el...
純css實現tab切換
前端開發中，經常會用到tab切換，最常用的做法是使用js處理顯示與隱藏，然而在h5開發中，完全可以做到利用css3的偽類選擇器實現這個效果，遺憾的是在ie8及以下，不可用。先看整體效果 為方便感興趣的朋友，直接上 html結構 tab1 tab2 tab3 content 1 顯示 content ...