4种样式的Tabs选项卡效果

使用方法：

引入CSS样式

<link rel="stylesheet" href="assets/css/tabs/tabs-basic.css">

引入jQuery库文件、插件初始化配置

<script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>

$(document).ready(function() {
  var widget = $('.tabs-underline');
  var tabs = widget.find('ul a'),
      content = widget.find('.tabs-content-placeholder > div');
  tabs.on('click', function (e) {
      e.preventDefault();
      // Get the data-index attribute, and show the matching content div
      var index = $(this).data('index');
      tabs.removeClass('tab-active');
      content.removeClass('tab-content-active');
      $(this).addClass('tab-active');
      content.eq(index).addClass('tab-content-active');
  });
});