SOURCE

console 命令行工具 X clear

                    
>
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



<!-- jquery js文件引入 -->

<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>
<!-- vue js文件引入 -->

<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;
  /* border-left: 2px solid #2795EE; */
  padding-left: 10px;
}
    
.content-list li.active {
  display: block;
}






本项目引用的自定义外部资源