изменить цвет кнопки на клик и оставаться таким же для остальной части времени?

Попробуй это:

http://jsfiddle.net/wmy8vucb/

Для этого вы можете использовать localStorage и jQuery .

простой код:

 ///APPLY A CSS TO THE BUTTON WHEN ITS CLICKED////// $( "#someid" ).click(function() { $(this).addClass('myclass'); localStorage.setItem('clicked', '1'); }); ////YOU MIGHT WANT TO PUT THIS IN A DOCUMENT READY FUNCTION//// if(localStorage.getItem("clicked") != null){ $("#someid").addClass('myclass'); } 

РЕДАКТИРОВАТЬ:

Основываясь на ваших комментариях ниже, у вас уже есть стиль CSS на вашей кнопке. поэтому, чтобы убедиться, что новый CSS / цвет применяется к вашей кнопке при нажатии, все, что вам нужно сделать, это следующее:

 .myclass{ background-color:green !important; } 

Принять к сведению:

  !important; 

Второе редактирование:

Код в последнем jsfiddle, который вы предоставили, отлично работает, если вы обязательно измените идентификатор кнопки:

В принципе, идентификатор вашей кнопки – myBtn но вы не используете этот идентификатор в коде jQuery. поэтому либо измените этот идентификатор на тот же идентификатор, который используется в коде jQuery, либо просто измените идентификатор, который используется в коде jQuery, на myBtn .

рабочий пример:

http://jsfiddle.net/wmy8vucb/6/

Это полностью зависит от того, насколько постоянным вы хотите, чтобы щелкнул цвет. Учитывая ваше дело, вы можете использовать cookies , cache или localStorage но данные в любом из них могут быть удалены пользователем или если пользователь использует какую-либо другую систему для входа в систему и нажатия кнопки, цвет нажатого может быть недоступен, поэтому лучшим решением для этой проблемы может быть ее сохранение в database поэтому каждый раз, когда пользователь входит в систему, цвет кнопки нажата будет постоянно изменен.

Если вы все еще хотите сделать это с помощью localStorage, вот ссылка, которая поможет вам: https://developer.mozilla.org/en-US/docs/Web/API/Storage

Это работает, чтобы изменить цвет и запомнить его, даже если вы обновляетесь с помощью F5.

 <button id="ikk" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" onclick="btnColorChange(0);" data-uid="UZqTjJnRVdGQjQ">Procced </button> <script> btnColorChange(1); function btnColorChange(start) { if (start) { index=document.cookie.search("btnColor"); if (index != -1) btnColor=document.cookie.substr(index+9); else btnColor="#ef332d"; } else btnColor='green'; btnId = document.getElementById("ikk"); btnId.style["background"] = btnColor; document.cookie = "btnColor="+btnColor; } </script> 

Если вы хотите, вы можете внести некоторую логику для изменения с каждым щелчком на следующий цвет. Для этого вам нужно изменить строку btnColor = 'green' с вашим кодом favorit.

это работает для меня http://jsfiddle.net/wmy8vucb/6/

 $( "#myBtn" ).click(function() { $(this).addClass('myclass'); localStorage.setItem('clicked', '1'); }); if(localStorage.getItem("clicked") != null){ $("#myBtn").addClass('myclass'); } 

 .myclass{ background-color:green !important; } 

 <button id="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="IeUtIMnV0V1JpQlU">Procced</button>