Question

在我的网站上，我在表格的标题中有4个css样式的按钮。当单击每个按钮时，它当前按照以下脚本正确地更改了css（以下代码可能不是我实现此结果的最简单/最有效的方式）。

我想要实现的是类似于单选按钮的功能，当单击4个按钮中的每个按钮时，修改后的类将在之前单击的按钮上重置。

JQUERY：

$(document).ready(function(){
    $(".red-btn.pcb").click(function(){

        $(this).removeClass("red-btn");

        $(this).addClass("redsort-btn");

    });
        $(".blue-btn.pcb").click(function(){

        $(this).removeClass("blue-btn");

        $(this).addClass("bluesort-btn");

    });


        $(".green-btn.pcb").click(function(){

        $(this).removeClass("green-btn");

        $(this).addClass("greensort-btn");

    });


         $(".orange-btn.pcb").click(function(){

        $(this).removeClass("orange-btn");

        $(this).addClass("orangesort-btn");

    });

});

HTML：

 <th><a class="red-btn pcb"><span> Red </span> </a><th>
 <th><a class="blue-btn pcb"><span> Blue </span> </a><th>
 <th><a class="green-btn pcb"><span> Green </span> </a><th>
 <th><a class="orange-btn pcb"><span> Orange </span> </a><th>

Answer 1

如果您可以将'sort'转换为自己的类，您可以执行以下操作：

$("a.pcb").click(function(){
  $(this)
    .addClass("sort").closest("th").siblings("th")
    .find("a").removeClass("sort");
});

然后稍微修改你的CSS：

.orangesort-btn  { font-weight:bold }

到

.orange-btn.sort { font-weight: bold }

Answer 2

为什么不使用CSS和jQuery的组合来做到这一点？你可以少跟踪。

将您的HTML更改为：

<th><a class="red-btn pcb sort"><span> Red </span> </a><th>
<th><a class="blue-btn pcb"><span> Blue </span> </a><th>
<th><a class="green-btn pcb"><span> Green </span> </a><th>
<th><a class="orange-btn pcb"><span> Orange </span> </a><th>

将“sort”作为类添加到要突出显示的类的位置。然后你可以使用以下jQuery：

$(document).ready(function(){
    $("a.pcb").click(function(){
        $("a.pcb").removeClass("sort");
        $(this).addClass("sort");

    });
});

我假设a.pcb类对于这些按钮是唯一的。然后在CSS中你只需要为每个（你基本上已经在做）定义正常和“排序”状态：

a.red-btn {
   color: red;
}

a.red-btn.sort {
   font-weight: bold;
}

Dunno你的风格是什么样的，但你应该明白这一点。如果你的活跃状态具有相同的效果（只是大胆的东西等），你可能会变得更加流畅，只需要一个类别定义：

a.red-btn {
   color: red;
}

a.blue-btn {
   color: blue;
}

a.pcb.sort {
   font-weight: bold;
}

Answer 3

好的我正在使用名为“Pure CSS btns”的滑动门式按钮（http://www.halmatferello.com/lab/pure-css-btns/）

CSS略有修改如下：

.pcb, .pcb span {
    background: url('/_img/secondary-amended.png') no-repeat;
    height: 23px;
    line-height: 23px;
    padding: 3px 0 7px 0;
}

.pcb, a.pcb:link, a.pcb:visited {
    color: #333;
    font-size: 11px;
    padding-left: 14px;
    text-decoration: none !important;
}
/* ie 6 hack */
* html div#frame .pcb {
    color: #333;
    padding-top: 0px;
    padding-bottom: 0px;
    text-decoration: none;
}
/* ie 7 hack */
*:first-child+html .pcb {
    color: #333;
    padding-top: 0px;
    padding-bottom: 0px;
    text-decoration: none;
}

.pcb span {
    background-position: right -326px;
    padding-right: 14px;
}


/*Normal State - Red*/
a.red-btn  {
    background-position: left -109px;
    color: #fff !important;
    padding-top: 3px;
    font-weight: bold;
}
a.red-btn span {
    background-position: right -435px;
    padding-top: 3px;
}
a.red-btn:hover {
    background-position: left -137px;
}
a.red-btn:hover span {
    background-position: right -463px;
}


/*Clicked State - Red*/

a.redsort-btn  {
    background-position: left -219px;
    padding-top: 3px;
}
a.redsort-btn span {
    background-position: right -545px;
    padding-top: 3px;
}
a.redsort-btn:hover {
    background-position: left -246px;
}
a.redsort-btn:hover span {
    background-position: right -572px;
}

重置按钮状态

3 个答案: