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

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

Если вы можете включить 'своего рода' в его собственном классе, вы могли бы сделать что-то вроде следующего:

$("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> 

Где вы добавляете «своего рода» как класс на который вы хотите подсвечивается. Затем вы можете использовать следующий 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; 
} 

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

a.red-btn { 
    color: red; 
} 

a.blue-btn { 
    color: blue; 
} 

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

Answer 3

Ok Я использую раздвижные двери кнопку стиля под названием «Pure CSS кнопок BTN "(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; 
}