|
@@ -0,0 +1,77 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="en">
|
|
|
|
|
+
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8">
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
+ <title>Document</title>
|
|
|
|
|
+ <script src="./js/vue.js"></script>
|
|
|
|
|
+ <style>
|
|
|
|
|
+ .tab-page{
|
|
|
|
|
+ width: 600px;
|
|
|
|
|
+ height: 400px;
|
|
|
|
|
+ border:3px solid #000;
|
|
|
|
|
+ margin: 100px auto;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tab-nav{
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ background-color: #333;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tab-nav .tab-item{
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ width: 120px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 60px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tab-nav .tab-item.active{
|
|
|
|
|
+ background-color: #ddd;
|
|
|
|
|
+ color: #000;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tab-content{
|
|
|
|
|
+ padding:20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ /* .tab-content .tab-content-item{
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tab-content .tab-content-item.active{
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ } */
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+
|
|
|
|
|
+<body>
|
|
|
|
|
+ <div id="app" class="tab-page">
|
|
|
|
|
+ <div class="tab-nav">
|
|
|
|
|
+ <!-- <div v-bind:class="['tab-item',{'active':activeIndex==0}]" @click="changeTab(0)">第一节课</div>
|
|
|
|
|
+ <div :class="['tab-item',{'active':activeIndex==1}]" @click="changeTab(1)">第二节课</div>
|
|
|
|
|
+ <div :class="['tab-item',{'active':activeIndex==2}]" @click="changeTab(2)">第三节课</div> -->
|
|
|
|
|
+ <div v-bind:class="['tab-item',{'active':activeIndex==0}]" @click="activeIndex=0">第一节课</div>
|
|
|
|
|
+ <div :class="['tab-item',{'active':activeIndex==1}]" @click="activeIndex=1">第二节课</div>
|
|
|
|
|
+ <div :class="['tab-item',{'active':activeIndex==2}]" @click="activeIndex=2">第三节课</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tab-content">
|
|
|
|
|
+ <div class="tab-content-item" v-if="activeIndex==0">第一节课的内容</div>
|
|
|
|
|
+ <div class="tab-content-item" v-else-if="activeIndex==1">第二节课的内容</div>
|
|
|
|
|
+ <div class="tab-content-item" v-else-if="activeIndex==2">第三节课的内容</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+ new Vue({
|
|
|
|
|
+ el:"#app",
|
|
|
|
|
+ data:{
|
|
|
|
|
+ activeIndex:0
|
|
|
|
|
+ },
|
|
|
|
|
+ methods:{
|
|
|
|
|
+ // changeTab(index){
|
|
|
|
|
+ // console.log(index)
|
|
|
|
|
+ // this.activeIndex = index
|
|
|
|
|
+ // }
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+
|
|
|
|
|
+</html>
|
