*.tab li
.tab div
.tab div.current
.active
<
/style>
<
/head>
"demo"
>
1.先用靜態標籤來構建頁面
2.然後用vue.js來重構--
>
="tab"
>
"shift(index)"
:class
="currentindex == index?'active':''"
:key=
"index" v-
for=
"(item, index) in fruit"
>
}<
/li>
<
!--通過三元運算子來判定，currentindex是否和當前索引一致，一致就新增active類，不一致就啥都不加
剩下的通過click事件操作。shift
(index)
,index是當前index，傳過去和currentindex比較，一致就新增類--
>
<
/ul>
class
="currentindex == index?'current':''"
:key=
"index" v-
for=
"(item, index) in fruit"
>
}<
/div>
<
!--通過三元運算子來判定，currentindex是否和當前索引一致，一致就新增current類，不一致就啥都不加--
>
<
/div>
<
/div>
var v =
newvue(,
,]},
methods:}}
)<
/script>
target偽類製作tab選項卡
target偽類的作用是突出顯示活動的html錨，下面是乙個簡單的例子 html 1 div 2 a href demo1 點選此處 a 3div 4 div id demo1 測試結果 div css 1 target 點選a元素之後，目標元素 demo1的樣式發生了變化，變化的樣式即css 所寫...
tab欄切換布局
案例分析 1.tab欄切換有兩個大的模組 2.上面是模組選項卡，點選某乙個，當前的底色為紅色，其餘不變 排他思想 用修改雷鳴的方式 3.下面的模組內容，會跟隨上面的選項卡變化，所以下面的模組變化需要寫到點選事件裡面 4.規律 下面的模組顯示內容和上面的選項卡意義對應相匹配 5.核心思路 給上面的ta...
tab欄切換操作
最近在學js核心技術dom，順便寫寫筆記，記錄一下自己的學習成果。今天要記錄的是乙個比較常見的案例，就是切換，用的排他思想，首先我們看看所要達成的效果 點選售後保障出現售後保障的介面，點選商品評價，出現商品評價的模組。然後我們看看流程 商品介紹 li 41 li 規格與包裝 li 42 li 售後保...