vuejs+bs(3.7.7) tabs(頁籤)

bootstrap = 3.7.7 fontawesome = 4.7 vuejs = 2.6.12

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<div id="vapp">
  <div class="container-fluid" style="max-width:1000px; margin:auto; min-width:450px;margin-top:20px;">
    <div class="row">
      <div class="col-md-6">
               <!--panel-info可依據需求調整為danger/warning/success/primary/default-->
               <div class="panel panel-info">
                  <div class="panel-heading">
                     <ul class="nav nav-tabs">
                        <li v-on:click="activetab=1" v-bind:class="[ activetab === 1 ? 'active' : '' ]"><a href="#"><i class="fa fa-binoculars"></i> CheckList</a></li>
                        <li v-on:click="activetab=2" v-bind:class="[ activetab === 2 ? 'active' : '' ]"><a href="#"><i class="fa fa-bar-chart"></i> Rates</a></li>
                        <li v-on:click="activetab=3" v-bind:class="[ activetab === 3 ? 'active' : '' ]"><a href="#"><i class="fa fa-cog"></i> Settings</a></li>
                     </ul>
                  </div>
                  <div v-if="activetab === 1" class="panel-body">
                    Zone1 Content<br/>
                    Zone1 Content<br/>
                    Zone1 Content<br/>
                    Zone1 Content<br/>
                    Zone1 Content<br/>
                  </div>
                  <div v-if="activetab === 2" class="panel-body">
                    Zone2 Content<br/>
                    Zone2 Content<br/>
                    Zone2 Content<br/>                    
                  </div>
                  <div v-if="activetab === 3"...

CSS

/*bootstrap tab styles */
.panel .panel-heading .nav.nav-tabs {
   position:relative;
   bottom:-5px;
   height:29px;
   border:none;
   margin-top:-9px;
   margin-left:-9px;
}

.panel .panel-heading .nav.nav-tabs li a {
   height:35px;
   line-height:17px;
   border:1px solid transparent;
}

.panel .panel-heading .nav.nav-tabs li:not(.active) a:hover,
.panel .panel-heading .nav.nav-tabs li:not(.active) a:focus {
   background:rgba(0, 0, 0, 0.05);
}

.panel .panel-heading .nav.nav-tabs li.active a {
   border:1px solid #407AB9;
   border-bottom-color: transparent !important;
   background:#FFF;
}

/* Colors */
.panel.panel-default .panel-heading .nav.nav-tabs li a { color: #555; }
.panel.panel-default .panel-heading .nav.nav-tabs li.active a { border-color:#DDDDDD;}
.panel.panel-primary .panel-heading .nav.nav-tabs li a { color: #FFF; }
.panel.panel-primary .panel-heading .nav.nav-tabs li.active a { color:#407AB9; }
.panel.panel-success .panel-heading .nav.nav-tabs li a { color:#67B857; }
.panel.panel-success .panel-heading .nav.nav-tabs li.active a { border-color:#D8E9C5;}
.panel.panel-warning .panel-heading .nav.nav-tabs li a { color: #8a6d3b; }
.panel.panel-warning .panel-heading .nav.nav-tabs li.active a { border-color:#F8EBCB;}
.panel.panel-danger .panel-heading .nav.nav-tabs li a { color: #a94442; }
.panel.panel-danger .panel-heading .nav.nav-tabs li.active a { border-color:#E8CCD1;}
.panel.panel-info .panel-heading .nav.nav-tabs li a { color: #337ab7;; }
.panel.panel-info .panel-heading .nav.nav-tabs li.active a { border-color:#C1E8F2; }

JavaScript

/* ref: https://codepen.io/doganuc4r/pen/EQJWgm
   bootstrap = 3.7.7  fontawesome = 4.7 vuejs = 2.6.12
*/
var appinstance = new Vue({
	el:'#vapp',
  data:{
  	msg: 'test',
    activetab: 1,
  },
  computed:{
  
  },
  methods:{
  	initialize(){
    	this.activetab = 2;
    }
  },
  created(){
  	this.initialize();
  }
});