超酷Tabs选项卡设计效果

<div class="tabs-basic">

  <-- 分页标签 -->

  <ul>

      <li>

          <a class="tab-active" data-index="0" href="#">First tab</a>

      </li>

      <li>

          <a data-index="1" href="#">Second tab</a>

      </li>

      <li>

          <a data-index="2" href="#">Third tab</a>

      </li>

  </ul>

  <!-- 内容页 -->

  <div class="tabs-content-placeholder">

      <div class="tab-content-active">

          <p>......</p>

          <img src="assets/images/1.jpg" alt="Banhoff">

      </div>

      <div>

          <p>......</p>

          <img src="assets/images/2.jpg" alt="Colosseum">

      </div>

      <div>

          <p>......</p>

          <img src="assets/images/3.jpg" alt="Sands of Life">

      </div>

  </div>

</div>

$(document).ready(function() {

    var widget = $('.tabs-basic');

    var tabs = widget.find('ul a'),

        content = widget.find('.tabs-content-placeholder > div');

    tabs.on('click', function (e) {

        e.preventDefault();

        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');

    });

});