Question

我有两个标签，每个标签都有不同的样式和不同的文字。最近的一篇文章和最近的一篇评论中的每篇文章都在下面，我们选择了这些文章。

当用户选择最近的评论时，它会将整个块更改为第二个（2）。几乎改变宽度，并交换两个选项卡的CSS。我目前正在使用idtabs http://www.sunsean.com/idTabs/

我的问题：如何在选择右侧标签时更改两者的标签css和宽度，然后在选择左侧标签时再次更改标签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/）方法在用户点击标签页时在两个类之间切换。

jquery标签改变了变化？

1 个答案: