タブ

by yshrkn

HTML

<!--******************** START tab menu ********************-->

<div class="tabWrapper">
  <ul class="tabTitlesWrapper">
    <li class="tabTitle active">title1</li>
    <li class="tabTitle">title2</li>
    <li class="tabTitle">title3</li>
    <li class="tabTitle">title4</li>
  </ul>
  <!-- .tabContentsWrapper -->
  <div class="tabContentsWrapper">
    <div class="tabContent active">text1</div>
    <div class="tabContent">text2</div>
    <div class="tabContent">text3</div>
    <div class="tabContent">text4</div>
  </div>
  <!-- .tabContentsWrapper -->
</div>
<!-- end .tabWrapper -->

<div class="tabWrapper">
  <ul class="tabTitlesWrapper">
    <li class="tabTitle active">title1</li>
    <li class="tabTitle">title2</li>
    <li class="tabTitle">title3</li>
    <li class="tabTitle">title4</li>
  </ul>
  <!-- .tabContentsWrapper -->
  <div class="tabContentsWrapper">
    <div class="tabContent active">text1</div>
    <div class="tabContent">text2</div>
    <div class="tabContent">text3</div>
    <div class="tabContent">text4</div>
  </div>
  <!-- .tabContentsWrapper -->
</div>
<!-- end .tabWrapper -->

<div class="tabWrapper">
  <ul class="tabTitlesWrapper">
    <li class="tabTitle active">title1</li>
    <li class="tabTitle">title2</li>
    <li class="tabTitle">title3</li>
    <li class="tabTitle">title4</li>
  </ul>
  <!-- .tabContentsWrapper -->
  <div class="tabContentsWrapper">
    <div class="tabContent active">text1</div>
    <div class="tabContent">text2</div>
    <div class="tabContent">text3</div>
    <div class="tabContent">text4</div>
  </div>
  <!-- .tabContentsWrapper -->
</div>
<!-- end .tabWrapper -->

<!--******************** END tab menu ********************-->

CSS

.tabWrapper {
  margin: 20px 10px 0;
}

.tabTitlesWrapper {
  list-style-type: none;
  overflow: hidden;
  margin-bottom: 0;
}

.tabTitle:hover {
  opacity: 0.7;
}

.tabWrapper .tabTitle {
  background: #ccf;
  padding: 10px;
  float: left;
  border-right: 1px solid #fff;
}

.tabTitle:last-child {
  border: none;
}

.tabTitle.active {
  background: #aaf;
  color: #fff;
}

.tabContentsWrapper .tabContent {
  background: #aaf;
  min-height: 50px;
  color: #fff;
  display: none;
}

.tabContentsWrapper .tabContent.active {
  display: block;
}

JavaScript

(function(){

  var activeClass = "active",
      $tabTitles = $(".tabWrapper .tabTitlesWrapper .tabTitle");

  function changeTabView($tag, index) { 
    $tag.removeClass(activeClass);
    $tag.eq(index).addClass(activeClass);
  }

  function addEventListener() {
    $tabTitles.on("click", function() {

      var $tabTitles = $(this.closest(".tabTitlesWrapper")).find(".tabTitle"),
          $tabContents = $(this.closest(".tabWrapper")).find(".tabContent"),
          activeIndex = $(this).index();

      changeTabView($tabTitles, activeIndex);
      changeTabView($tabContents, activeIndex);
    });
  }

  function init() {
    addEventListener();
  }

  init();

})();