> 效果如圖
>
> html 代碼
```
<div id="app">
<div class="tab-list">
<a :class="{'tab': tabId==0}" @click="clickT(0)">html</a>
<a :class="{'tab': tabId==1}" @click="clickT(1)">html</a>
<a :class="{'tab': tabId==2}" @click="clickT(2)">html</a>
<a :class="{'tab': tabId==3}" @click="clickT(3)">html</a>
</div>
<div class="content" v-show="tabId==0">0</div>
<div class="content" v-show="tabId==1">1</div>
<div class="content" v-show="tabId==2">2</div>
<div class="content" v-show="tabId==3">3</div>
</div>
```
> js 代碼
```
var vm = new Vue({
el: '#app',
data() {
return {
tabId: 0
}
},
methods: {
clickT(num) {
this.tabId = num;
console.log(this.tabId)
}
},
})
```
> css 代碼
```
.tab-list {
width: 400px;
height: 20px;
line-height: 20px;
background: gray;
display: flex;
justify-content: space-between;
}
.tab-list a {
flex: 1;
text-align: center;
}
.tab {
background: cadetblue;
color: aliceblue;
}
.content {
width: 400px;
height: 400px;
border: 1px solid black;
}
```
- 空白目錄
- css實用樣式
- css--下拉欄的幾種設計
- css--圖片陰影以及浮起的效果
- css--圖片翻轉二：自動翻轉
- css--圖片翻轉一：滑過翻轉
- css--三種loading特效
- css--圖片遮罩效果實現
- css--又是三種loading特效
- css--帶三角形的圖形實現
- js demo
- 原生demo
- 1. 原生js實現輪播圖
- 2. 倒計時按鈕
- 3. 動態添加表格
- 4. checkbox全選反選
- 5. 小米登錄方式切換
- 6. 點擊事件
- 7. 個人網頁導航條(二)點擊滾動
- 8. 瀑布流實現！
- 9. 個人網頁導航條(一)滑動固定
- 10. 定時器實現淡入淡出效果
- 11. 輪播圖setTimeout版
- jQuery demo
- 1. 輪播圖實現！
- 2. 成都小風車導航特效
- html組件
- html--導航欄（家居醫生）
- html--登錄頁面（小米登錄）
- html--響應式導航條（木兮地板）
- html--搜索欄
- Vue demo
- 1. mvvm實現動態添加表格
- 2. 豆瓣TOP250渲染
- 3. 制作一段跑馬燈文字
- 3.1. vue 單行文字自動跑馬燈效果
- 4. 利用豆瓣接口搜索書籍
- 5. 制作簡易計算器
- 6. 創建一個點贊組件
- 7. 列表添加刪除動畫
- 8. isShow手風琴原理
- 9. tab欄切換