2단 탭 메뉴 - 2dan taeb menyu

본문

 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>

  $( function() {

    $( "#tabs" ).tabs();

  } );

  </script>

 

<div id="tabs">

<style>

.gun {

margin-right:20px

}

</style>

  <ul>

    <li><a href="#tabs-0">전체</a></li>

    <li><a href="#tabs-1">1군</a></li>

    <li><a href="#tabs-2">2군</a></li>

    <li><a href="#tabs-3">3군</a></li>

    <li><a href="#tabs-4">4군</a></li>

    <li><a href="#tabs-5">5군</a></li>

    <li><a href="#tabs-6">6군</a></li>

    <li><a href="#tabs-7">7군</a></li>

    <li><a href="#tabs-8">8군</a></li>

    <li><a href="#tabs-9">9군</a></li>

  </ul>

  <div id="tabs-0" >

  <a href="#" class="gun">1군 옵션 </a>

  <a href="#" class="gun">2군 옵션 </a>

  <a href="#" class="gun">3군 옵션 </a>

  <a href="#" class="gun">4군 옵션 </a>

  <a href="#" class="gun">5군 옵션 </a>

  <a href="#" class="gun">6군 옵션 </a>

  <a href="#" class="gun">7군 옵션 </a>

  <a href="#" class="gun">8군 옵션 </a>

  <a href="#">9군 옵션 </a>

  </div>

  <div id="tabs-1">

    <a href="#">1군 옵션 </a>

  </div>

  <div id="tabs-2">

   <a href="#">2군 옵션 </a>

   </div>

  <div id="tabs-3">

    <a href="#">3군 옵션 </a>

  </div>

  <div id="tabs-4">

    <a href="#">5군 옵션 </a>

  </div>

  <div id="tabs-5">

   <a href="#">5군 옵션 </a>

   </div>

  <div id="tabs-6">

    <a href="#">6군 옵션 </a>

  </div>

  <div id="tabs-7">

    <a href="#">7군 옵션 </a>

  </div>

  <div id="tabs-8">

   <a href="#">8군 옵션 </a>

   </div>

  <div id="tabs-9">

    <a href="#">9군 옵션 </a>

  </div>

</div>

관련자료