Сбросить состояние кнопки

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

Почему бы не использовать комбинацию 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");

    });
});

Я предполагаю, что класс .pcb уникален для этих кнопок. Затем в CSS вам просто нужно определить нормальное и «сортирующее» состояния для каждого (что вы в основном уже делаете):

a.red-btn {
   color: red;
}

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

Не знаю, как выглядят ваши стили, но вы должны понять. Черт возьми, если ваше активное состояние имеет такой же эффект (только жирный шрифт и т. Д.), Вы можете получить еще более приятный вид, и вам понадобится только одно определение класса сортировки:

a.red-btn {
   color: red;
}

a.blue-btn {
   color: blue;
}

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

Answer 2

Хорошо, я использую кнопку стиля раздвижных дверей, которая называется "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;
}

Answer 3

Если вы можете превратить «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 }