Добавить забрать класс при клике
Самый простой скрипт который добавляет и убирает класс при клике при помощи jquery.
1. Делаем на jquery
2. Делаем на чистом jаvascript
---
---
1. Реализация добавления класа на jquery:
Где:
.button – класс объекта, по которому кликают.
.block – класс объекта, в который нужно добавить класс.
active – класс, который добавляется или удаляется по клику.
<script>
$(function(){
$('.button').click(function(){
$('.block').toggleClass('active');
});
});
</script>
Забрать и добавть клас к двум блокак одновременно:
.navig – класс объекта, по которому кликают.
lmenumob, navig – классы, к которм добавляется или удаляется по клику.
<script>
$(function(){
$('.navig').click(function(){
$('.lmenumob').toggleClass('activmens'),
$('.navig').toggleClass('activnavig');
});
});
</script>
2.
А можно все сделать и а чистом jаvascript:
Как не парадоксально - НО! чтобы изменить стили по клику нужно сначала прописать объект HTMLElement, чтобы добавить методы для добавления, удаления, переключения и проверки классов ( gist ):
HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element; HTMLElement.prototype.addClass = function(string) { if (!(string instanceof Array)) { string = string.split(' '); } for(var i = 0, len = string.length; i < len; ++i) { if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) { this.className = this.className.trim() + ' ' + string[i]; } } }
HTMLElement.prototype.removeClass = function(string) { if (!(string instanceof Array)) {string = string.split(' ');} for(var i = 0, len = string.length; i < len; ++i) {this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();} }
HTMLElement.prototype.toggleClass = function(string) { if (string) { if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) { this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim(); } else { this.className = this.className.trim() + ' ' + string; } } }
HTMLElement.prototype.hasClass = function(string) { return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className); }
document.getElementById('eleID').onclick = function() { this.toggleClass('active'); }
А уже потом прописывать для всех элементов:
document.getElementById('yourElementId').onclick = function() {
this.toggleClass('active');
}
* При клике на id #yourElementId к элементудобавляется клас .active - при повторном клике убирается