jquery選項卡變化？

Question

我有兩個選項卡，每個選項都有不同的樣式和不同的文本。最近的一個帖子和一個最近的評論CSS的每個都在下面，我需要時，他們被選中。

所以當用戶選擇最近的評論時，它會將整個塊更改爲第二個（2）。幾乎改變寬度，並交換兩個選項卡的CSS。我目前正在使用idtabs http://www.sunsean.com/idTabs/

我的問題：如何選擇右側選項卡，然後再選擇左側選項卡時，如何更改選項卡的css和width。

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/）方法在用戶單擊該選項卡時在兩個類之間切換。