选项卡 / Tab

正常模式

点击标签可以切换

可以通过阻止 change 事件对象的默认行为来阻止切换标签

<div class="container">

  <div id="tab" class="ui-tab">
    <ul class="ui-tab-wrapper">
      <li class="ui-tab-item ui-tab-item-first ui-tab-item-active" data-index="0" data-panel="#panel1">CSS控件</li>
      <li class="ui-tab-item" data-index="1" data-panel="#panel2">UI控件拆分</li>
      <li class="ui-tab-item" data-index="2" data-panel="#panel3">UI栅格化设计</li>
      <li class="ui-tab-item  ui-tab-item-last" data-index="3" data-panel="#panel4">不能点哦~</li>
    </ul>
  </div>
  <div id="panel1" class="panel" style="background-color: green; display: block"></div>
  <div id="panel2" class="panel" style="background-color: blue; display: none"></div>
  <div id="panel3" class="panel" style="background-color: red; display: none"></div>
  <div id="panel4" class="panel" style="background-color: yellow; display: none"></div>
  
</div>

require(['moye/Tab'], function (Tab) {

  var tab = new Tab({
    main: document.getElementById('tab')
  }).render();

  tab.on('change', function (e) {
    if (e.activeIndex === 3) {
      e.preventDefault();
    }
  });

});

hover 切换元素

require(['moye/Tab', 'moye/plugin/TabBar'], function (Tab) {

  new Tab({
    main: document.getElementById('tab'),
    plugins: ['TabBar'],
    mode: 'hover'
  }).render();

});