개발이야기

JQuery UI Tabs 이용하기

클라인STR 2015. 11. 27. 00:28

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 

 

<!--  탭  -->

  <div id="tabs" >

      <ul class="check">

          <li class="show"><a href="#move">이동</a></li>                                                            

          <li class="hide"><a href="#rpar">수리</a></li>

      </ul>

   

        <!--  이동이력 탭 -->

        <div id="move" class="Tab_container">       

        </div>

 

         <!--  수리이력 탭 -->

         <div id="rpar" class="Tab_container">

         </div>

     </div>

 cs

JQuery UI Tabs HTML 구성은 위와같다.

 

1
2
3
4
 
jQuery("#tabs").tabs({                                                                                              
        active: "2"
    });

 cs

2번째 탭을 활성화 시킬경우

 

1
2
3
4
5
6
jQuery("#tabs a").click(function(){ 
            
      var tabId = jQuery("#tabs li.ui-state-active").attr("aria-controls");                                        
           
});
 
 cs

탭을 클릭한 id 정보를 알고싶을경우

참고 : http://api.jqueryui.com/tabs/#option-active