탭 기능 구현하는 방법 - Jquery ver

HTML

/** 탭 Nav Bar **/
<div class="tabs is-toggle is-fullwidth" id="tabs">
  <ul>
    <li class="is-active" data-tab="1">
      <a>
        <span class="icon is-small"><i class="fa fa-image"></i></span>
        <span>Pictures</span>
      </a>
    </li>
    <li data-tab="2">
      <a>
        <span class="icon is-small"><i class="fa fa-music"></i></span>
        <span>Music</span>
      </a>
    </li>
  </ul>
</div>


/** 탭 Contents **/
<div id="tab-content">
  <p class="is-active" data-content="1">
    Pictures
  </p>
  <p data-content="2">
    Music
  </p>
</div>

 

CSS

#tab-content p {
  display: none;
}

#tab-content p.is-active {
  display: block;
}

 

Jquery

$(document).ready(function() {

  // 탭을 클릭하면
  $('#tabs li').on('click', function() {
    var tab = $(this).data('tab');

    $('#tabs li').removeClass('is-active');
    $(this).addClass('is-active');

    $('#tab-content p').removeClass('is-active');
    $('p[data-content="' + tab + '"]').addClass('is-active');
  });
});

 

 

 

 

 

stackoverflow.com/questions/47591474/how-to-switch-through-tabs-in-bulma

How to switch through tabs in bulma