Добавить класс к элементу и сохранить изменение после reload

Добрый день, есть задача, сделать несколько css кнопок, и чтоб можно было выбрать только одну из них, при выборе, чтоб кнопка изменяла вид... сделал кнопки, подключил jquery обработчик,

Код (Text):

1. <div class="tab-pane-admin fade" id="styling">
2.                         <div class="input-block-admin">
3.                             <div class="buttons-predefined">
4.                                <button name="color_btn" class="btn blue ">Blue</button>
5.                                <button name="color_btn" class="btn green " >Green</button>
6.                             </div>
7.                         </div>
8. </div>

вот jquery обработчик нажатий который получилось сваять, я далеко не спец в jquery, так что сильно не ругайте.

Код (Text):

1. (function($) {  
2. $(function() {  
3.   $('button.blue').click(function() {
4.     $(this).addClass('active');
5. });
6. $('button.blue.active').click(function() {
7.     $(this).removeClass('active');
8. });
9. $('button.green').click(function() {
10.     $(this).addClass('active');
11. });
12. $('button.green.active').click(function() {
13.     $(this).removeClass('active');
14. });
15. })  
16. })(jQuery)

Код (Text):

1.  
2. .tab-pane-admin {
3. padding-bottom: 20px;
4. }
5. .blue {
6.     background-color: #345e9e;
7.     border: 1px solid #345e9e;
8. }
9. .green {
10.     background-color: #006746;
11.     border: 1px solid #006746;
12. }
13. .buttons-predefined button{
14.     float: left;
15. }
16. .buttons-predefined button:hover {
17.     float: left;
18. }
19. btn {
20.     float: right;
21.     margin-top: 14px;
22.     margin-right: 20px;
23.     padding: 5px 15px;
24.     outline: none;
25.     border: none;
26.     border: 1px solid #000;
27.     border-radius: 4px;
28.  
29.     background-color: #000;
30.  
31.     color: #fff;
32.  
33.     -webkit-transition: all 0.2s;
34.     -moz-transition: all 0.2s;
35.     transition: all 0.2s;
36. }
37. .btn:hover {
38.     background-color: #fff;
39.  
40.     color: #000;
41. }
42. .active {
43.     background-color: #fff;
44.  
45.     color: #000;
46. }

пока работает, только на добавление класса, но почему-то на второе нажатие кнопки уже не реагирует, класс не убирается.

может я не по тому пути пошел, подскажите верный путь... а то зашел в тупик... Спасибо за помощь хоть какую-то.

 

Re: Добавить класс к элементу и сохранить изменение после re

возможно пытаюсь создать велосипед ... но из-за нехватки знаний другого не могу придумать и найти тоже...

вообще задача, такая, выбрать цвет, и в зависсимости от выбранного цвета подключать тот или иной css.
вот ссылкаhttp://jsfiddle.net/9a5Jj/6/ помогите плз...

даже если и найду способ сохранить классы после нажатия на кнопку, хз, потом как проверить какая кнопка нажата, чтобы подключить css.

 

Re: Добавить класс к элементу и сохранить изменение после re

хм, ну как объяснить... в общем есть сайт на wordpress, делаю тему для него, в теме уже сделал страницу настроек для самой темы, в этих настройках надо сделать выбор цветовой схемы для темы. вот и мучаюсь )).. кнопки нарисовал, теперь задача их обработать... и хочется чтобы кнопки красивые были как уже есть... вот и получается, что при выборе цвета, я подключаю нужный css c нужными цветами, уже есть скрипт, который подключает css... вот только не получается определить какая кнопка выбрана, чтобы его запускать...

 

Re: Добавить класс к элементу и сохранить изменение после re

я уже делал этот механизм, с помощью select, все работало... теперь хочу сделать красиво, чтобы кнопочками можно было выбирать цвет.

 

Re: Добавить класс к элементу и сохранить изменение после re

ВАУ супер, то что надо, спасибо большущее, готов отблагодарить, скинь в лс номер карточки... спасибо.!!!

 

Re: Добавить класс к элементу и сохранить изменение после re

Спасибо еще раз!!! два дня искал...

 

Re: Добавить класс к элементу и сохранить изменение после re

cупер, попробую, спасибо большое!!!