Главная » DARYA DLE » Скрипты » Добавить забрать класс при клике
650 0  

Добавить забрать класс при клике

Самый простой скрипт который добавляет и убирает класс при клике при помощи 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>

feel

2. fellow А можно все сделать и а чистом jаvascript:

no Как не парадоксально - НО! чтобы изменить стили по клику нужно сначала прописать объект 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 - при повторном клике убирается



Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2021