console
// jquery
// jquery
var tabBarItem = $('.tab-bar li');
var contentItem = $('.content-list li');
var activeIndex = '0';
tabBarItem.click(function () {
var clickIndex = $(this).index()
clickIndex != activeIndex && switchTab(clickIndex)
})
function switchTab(index) {
tabBarItem.eq(activeIndex).removeClass('active')
tabBarItem.eq(index).addClass('active')
contentItem.eq(activeIndex).removeClass('active')
contentItem.eq(index).addClass('active')
activeIndex = index
}
switchTab(activeIndex)
// Vue
var app = new Vue({
el: '#app',
data: {
activeIndex: 0
}
})
// app.activeIndex = 1
<div class="jquery">
<h1>jQuery</h1>
<ul class="tab-bar">
<li>我的使命</li>
<li>星辰奇缘</li>
</ul>
<ul class="content-list">
<li>我的使命:这是一款模拟战争游戏</li>
<li>星辰奇缘:这是一款回合制游戏</li>
</ul>
</div>
<div class="vue" id="app">
<h1>Vue</h1>
<ul class='tab-bar'>
<li :class="{active:activeIndex==0}" @click="activeIndex=0">我的使命</li>
<li :class="{active:activeIndex==1}" @click="activeIndex=1">星辰奇缘</li>
</ul>
<ul class="content-list">
<li :class="{active:activeIndex==0}">我的使命:这是一款模拟战争游戏</li>
<li :class="{active:activeIndex==1}">星辰奇缘:这是一款回合制游戏</li>
</ul>
</div>
body {
font-size: 14px;
}
h1 {
font-size: 32px;
font-weight: normal;
border-left: 3px solid #2795EE;
padding-left: 15px;
}
.tab-bar {
text-align:center;
}
.tab-bar li {
display: inline-block;
width: 100px;
font-size: 16px;
text-align: center;
line-height: 2;
margin: 0 30px;
border-bottom: 2px solid transparent;
}
.tab-bar li.active {
color: #2795EE;
border-color: #2795EE;
}
.active {
color: #2795EE;
border-color: #2795EE;
}
.content-list li{
display: none;
padding-left: 10px;
}
.content-list li.active {
display: block;
}