jquery 탭이 변경 될 때마다 변경됩니까?

Question

각기 다른 스타일과 다른 텍스트로 된 두 개의 탭이 있습니다. 한 최근 게시물과 최근에 각각에 대한 CSS는 내가 선택한 때 가질 필요가있는 것들과 아래에 있습니다.

사용자가 최근 댓글을 선택하면 전체 블록이 두 번째 블록 (2)으로 변경됩니다. 꽤 많이 변화하는 너비, 그리고 두 탭에 대한 CSS를 바꿔 치기. 현재 IDTAB를 사용 중입니다. http://www.sunsean.com/idTabs/

내 질문 : 어떻게 오른쪽 탭을 선택한 다음 다시 왼쪽 탭을 선택했을 때 둘 다 탭 CSS와 너비를 변경할 수 있습니까?

CSS

#sideboxtopleft { 
float: left; 
width: 121px; 
height:20px; 
background-image: url(images/categorysplitter.gif); 
background-position:top right; 
background-repeat:no-repeat; 
text-align: center; 
padding-top: 10px; 
margin: 0; 
} 

#sideboxtopleft2 { 
float: left; 
width: 173px; 
height:20px; 
background-image: url(images/categorysplitter.gif); 
background-position:top right; 
background-repeat:no-repeat; 
text-align: center; 
padding-top: 10px; 
margin: 0; 
} 

#sideboxtopright { 
float: right; 
width: 173px; 
height: 20px; 
background-image:url(images/categorybg.gif); 
text-align: center; 
padding-top: 10px; 
margin: 0; 
} 

#sideboxtopright2 { 
float: right; 
width: 121px; 
height: 20px; 
    background-image:url(images/categorybg.gif); 
text-align: center; 
padding-top: 10px; 
margin: 0; 
} 

HTML

<div id="sidebox" style="padding: 0px; width:294px;"> 
<div class="idTabs"> 
<div id="sideboxtopleft"> 
<a href="#post"><h3>RECENT POSTS <img src="images/arrow.gif" width="9" height="5" alt="v" border="0" /></h3></a> 
</div> 
<div id="sideboxtopright"> 
<a href="#comments"><h3>RECENT COMMENTS <img src="images/arrow2.gif" width="6" height="9" alt=">" border="0" /></h3></a> 
</div> 
</div> 
<div style="padding: 10px;"> 
<div id="post"> 
SUP? 
</div> 
<div id="comments"> 
SUP?>>!?>!! 
</div> 
</div> 
</div> 

<div id="sidebox" style="padding: 0px; width:294px;"> 
<div class="idTabs"> 
<div id="sideboxtopleft2"> 
<a href="#post2"><h3>RECENT COMMENTS <img src="images/arrow.gif" width="9" height="5" alt="v" border="0" /></h3></a> 
</div> 
<div id="sideboxtopright2"> 
<a href="#comments2"><h3>RECENT POSTS <img src="images/arrow2.gif" width="6" height="9" alt=">" border="0" /></h3></a> 
</div> 
</div> 
<div style="padding: 10px;"> 
<div id="post2"> 
SUP? 
</div> 
<div id="comments2"> 
SUP?>>!?>!! 
</div> 
</div> 
</div> 

Answer 1

차라리 직접 요소에 적용하기보다는, 클래스의 두 가지 형식을 정의하는 것이 좋습니다. 그렇게하면 toggleClass() (http://api.jquery.com/toggleClass/) 메서드를 사용하여 사용자가 탭을 클릭 할 때 두 클래스를 전환 할 수 있습니다.