vir-tabs

by cjg125

HTML

<script src="//unpkg.com/vir"></script>
<div class="demo">
  <ol>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>五</li>
  </ol>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

SCSS

* {
  margin: 0;
  padding: 0
}

li {
  list-style: none
}

.demo {
  width: 500px;
  margin: 0 auto;
  ol {
    width: 500px;
    li {
      color: green;
      width: 100px;
      float: left;
      line-height: 30px;
      text-align: center;
      font-size: 16px;
      background-color: #eee;
      &.cur {
        background: #aaa;
      }
    }
  }
  ul li {
    display: none;
    width: 500px;
    height: 200px;
    background-color: #ffcccc;
  }
}

JavaScript

var App = Vir({
  data: {
    index: 0
  },
  events: {
    'click->ol > li': 'handler'
  },
  watch: {
    index: function(result) {
      var old = result.old
      var index = result.value
      this.$$('ol > li').eq(old).removeClass('cur')
      this.$$('ul > li').eq(old).hide()
      this.$$('ol > li').eq(index).addClass('cur')
      this.$$('ul > li').eq(index).show()
    }
  },
  methods: {
    handler: function(e) {
      var index = $(e.currentTarget).index()
      this.set('index', index)
    }
  }
})
new App({
  el: ".demo",
  init: function() {
    this.set('index', 0, {
      force: true
    })
  }
})