如何在点击时更改课程

Question

我有结构:

<table style="width: 100%;">
    <tr>
        <td>
            <a href="#" class="yy">one</a>
        </td>

    </tr>
    <tr>
        <td>
            <a href="#" class="xx">Two</a>
        </td>

    </tr>
    <tr>
        <td>
            <a href="#" class="xx">Three</a>
        </td>

    </tr>
</table>

CSS:

.xx {
    border: 5px solid green;    
}

.yy {
    border: 5px solid red;    
}

现在点击<a>它的类应该改变.即如果它是'xx'那么它应该转'yy'反之亦然,剩下的<a>应该保持原样,我尝试了类似的东西(参考:如何在jquery中更改<a>标签的类)

$("a.xx").click(function() {
  $(".yy").not(this).removeClass("yy");
  $(this).toggleClass("yy");
});?

但它没有那样工作,我试图调整代码,但它不起作用.有人可以帮忙.

编辑:可能我的问题不够明确:如果我点击第二个<a>/任何其他,<a>那么它应该变成红色,标签的其余部分应该是绿色.如果<a>有红色,那么它应该变成绿色和其余的应该是红色的,反之亦然.

编辑更明确的要求(基于来自sje397的回复):说我点击了一个类xx/yy,即我再次点击它应该改变,即如果xx然后它应该回到yy,如果你再次点击它应该回到xx. -

Answer 1

$("a").click(function() {
  $(this).toggleClass("yy").toggleClass("xx");
});?

编辑(由于作者的评论)

如果你想只有一个突出显示的标签(即具有'yy'类),而其他所有标签都有'xx'类,你可以这样做:

$("a").click(function() {
  var $this = $(this); // this is just for performance
  if(!$this.hasClass('yy'))
    $('.yy').toggleClass("yy").toggleClass("xx");
  $this.toggleClass("yy").toggleClass("xx");
});?

但是,通常情况下,您可以使用css的"级联"属性来简化操作.例如,不是切换类,只需向所选元素添加一个额外的类.然后组织您的CSS,以便在此更具体的情况下,您需要用于突出显示的显示属性覆盖.例如,使用此CSS:

.xx {
    border: 5px solid green;    
}

.xx.yy {
    border: 5px solid red;    
}

你只需要添加和删除'yy'类并单独留下'xx'类.