Jquery UI 탭 클래스 추가

Question

다음은 모두 잘 작동하는 탭에 대한 내 HTML 설정입니다. div를 포함하는 div (id = tab-wrap class = bike) 클래스를 변경하여 조금 확장하려고합니다. 탭이 표시됩니다. 아이디어는 탭을 기반으로 배경 이미지를 변경하는 것입니다. 것

<div id="tab-wrap" class="bike"> 

인/아웃 변화

<div id="tab-wrap" class="water"> 

우아한 페이드

에 :

<div id="tab-wrap" class="bike"> 

     <div id="batter-finder"> 
      <h1>Battery Finder</h1> 
      <p>Choose Your Application then find your battery</p> 

      <div id="tabs"> 
       <ul> 
        <li><a href="#bike">Bike</a></li> 
        <li><a href="#atv">ATV</a></li> 
        <li><a href="#utv">UTV</a></li> 
        <li><a href="#snow">Snow</a></li> 
        <li><a href="#water">Water</a></li> 
       </ul> 

       <div id="bike"> 
        <p>Bike content</p> 
       </div> 

       <div id="atv"> 
        <p>ATV content</p> 
       </div> 

       <div id="utv"> 
        <p>UTV content</p> 
       </div> 

       <div id="snow"> 
        <p>Snow content</p> 
       </div> 

       <div id="water"> 
        <p>Water content</p> 
       </div> 

      </div> <!-- /tabs --> 

     </div> 

    </div> 

내가 탭을 선택 그렇다면 "물"난에서 클래스를 변경하려면 좋은.

$(document).ready(function() { 

    $("#tabs").tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); 
}); 

가 도움을 감사

Answer 1

,

demo

$("#tabs").tabs({ 
    fx: { height: 'toggle', opacity: 'toggle' }, 
    select: function(event, ui) { 
     $("#tab-wrap").attr('class', ui.panel.id); 
    } 
}); 

Answer 2

$("#tabs").bind("tabsselect", function(event, ui) { 
    $("#tab-wrap").attr('class', $(ui.panel).attr('id')); 
} 

또는 감사합니다 다음과 같이 내 JQuery와는 당신이 탭을 선언 할 때 이벤트를 바인딩 할 경우 : 이벤트 섹션

$("#tabs").tabs({ 
    select: function(event, ui) { 
     $("#tab-wrap").attr('class', $(ui.panel).attr('id')); 
    } 
}); 

체크 아웃 jQuery UI tabs 데모 페이지에서 이처럼 그것을 할 수