5 / 5 / 2
Регистрация: 24.08.2015
Сообщений: 302

Добавление класса к элементу по нажатию на кнопку

16.07.2017, 10:42. Показов 3264. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте, есть на сайте несколько кнопок <a class="module-link" href="#"></a><a class="module-link" href="#"></a>, как сделать, что бы при нажатии на одну из них к <div class="login_form"></div> и к <div class="header-top"></div> добавлялись классы: к первому- visible а ко второму hidden, и что бы это было в куках, что бы классы не убирались при перезагрузки. А если нажать на кнопку <button class="close"></button> то убирались бы классы visible и hidden, у удалялась бы кука.
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
16.07.2017, 10:42
Ответы с готовыми решениями:

Добавление в БД по нажатию на кнопку
&lt;html&gt; &lt;?php include_once 'db.php'; $CONNECT = mysqli_connect(HOST, USER, PASS, DB); ?&gt; &lt;head&gt; &lt;title&gt;CKICk&lt;/title&gt; ...

Добавление эллементов по нажатию на кнопку
Здравствуйте. Есть проблема, по нажатию на кнопку я добавляю html код на страницу. &lt;div id=&quot;accordion&quot;&gt; &lt;script...

Добавление таблицы с 5ю формами по нажатию на кнопку. JS
Вторую неделю изучаю JS. Возникла проблема:( шарю в интернетах уже пару дней =/ в общем: при нажатии на кнопку, нужно добавить...

5
 Аватар для Пифагор
2172 / 1655 / 840
Регистрация: 10.01.2015
Сообщений: 5,207
16.07.2017, 11:26
Лучший ответ Сообщение было отмечено userook как решение

Решение

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<a class="module-link" href="#">module-link</a><a class="module-link" href="#">module-link</a>
<div class="login_form">login_form</div> и к <div class="header-top">header-top</div>
<button class="close">button</button>
 
<script>
document.querySelectorAll("a.module-link").forEach( function(n){
  n.addEventListener("click", function(){
    localStorage.setItem("visible", "visible");
    localStorage.setItem("hidden", "hidden");
    location.reload();
  })
})
 
document.querySelector('button.close').addEventListener("click", function(){
  localStorage.clear();
  location.reload();
})
document.querySelector("div.login_form").style.visibility = localStorage.getItem("visible");
document.querySelector("div.header-top").style.visibility = localStorage.getItem("hidden");
</script>
1
5 / 5 / 2
Регистрация: 24.08.2015
Сообщений: 302
16.07.2017, 22:05  [ТС]
Все отлично. Только тут чуть по другому, там делается вот так: <div class="login_form" style="visibility: visible;">
<div class="header-top" style="visibility: hidden;"> а мне нужно например <div class="login_form lf_visible"> и <div class="header-top ht_hidden">что бы добавлялся класс, а не стиль. Спасибо
0
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
17.07.2017, 13:50
Лучший ответ Сообщение было отмечено userook как решение

Решение

HTML5
1
2
3
4
5
6
7
<div class="header-top">Header top</div>
<div class="login_form">Login form</div>
<a class="module-link" href="#">Link 1</a>
<a class="module-link" href="#">Link 2</a>
<button type="button" class="close">
  &times;
</button>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var loaded = function() {
  var App = {};
  App.dom = {
    links: document.querySelectorAll('a.module-link'),
    btnClose: document.querySelector('button.close'),
    loginForm: document.querySelector('.login_form'),
    headerTop: document.querySelector('.header-top'),
  };
 
  // [url]https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework[/url]  
  App.cookies = {
    set: function() {
      document.cookie = "showLoginForm=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
    },
    get: function() {
      return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent('showLoginForm').replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
    },
    remove: function() {
      document.cookie = "showLoginForm=; expires=Fri, 01 Jan 1970 00:00:00 GMT";
    }
  }
 
  App.showOrHideLoginForm = function() {
    var cl = this.dom.loginForm.classList,
      act = App.cookies.get() ? cl.add : cl.remove;
 
    act.call(this.dom.loginForm.classList, 'lf_visible');
    act.call(this.dom.headerTop.classList, 'ht_hidden');
  };
 
  App.click = function(block) {
    return function(event) {
      event.preventDefault();
      block();
      App.showOrHideLoginForm();
    };
  };
 
  App.linkClick = App.click(function() {
    App.cookies.set();
  });
 
  App.deleteClick = App.click(function() {
    App.cookies.remove();
  });
 
  for (var i = 0, l = App.dom.links.length; i < l; i++) {
    App.dom.links[i].addEventListener('click', App.linkClick);
  };
 
  App.dom.btnClose.addEventListener('click', App.deleteClick);
  App.showOrHideLoginForm();
};
 
window.addEventListener('DOMContentLoaded', loaded);
https://jsfiddle.net/j2FunOnly/gm9p7p19/
1
5 / 5 / 2
Регистрация: 24.08.2015
Сообщений: 302
18.07.2017, 01:01  [ТС]
А можно еще сделать что бы не тока на button.close закрывалась, но и на кнопку "esc" на клавиатуре.
0
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
18.07.2017, 08:48
Лучший ответ Сообщение было отмечено userook как решение

Решение

Конечно можно.
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
App.init = function() {
  // ...
  App.dom.btnClose.addEventListener('click', App.deleteClick);
  document.addEventListener('keydown', App.escClick);
  App.showOrHideLoginForm();
}
 
// ...
 
App.click = function(block) {
  return function(event) {
    block(event);
    App.showOrHideLoginForm();
  };
};
 
App.linkClick = App.click(function(e) {
  e.preventDefault();
  App.cookies.set();
});
 
App.deleteClick = App.click(function(e) {
  e.preventDefault();
  App.cookies.remove();
});
 
App.escClick = App.click(function(e) {
  if (e.keyCode !== 27) return;
  App.cookies.remove();
});
https://jsfiddle.net/j2FunOnly/gm9p7p19/
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
18.07.2017, 08:48
Помогаю со студенческими работами здесь

Добавление пользовательских элементов управления по нажатию на кнопку
Создал UserControl с названием ProductPanel. Как добавить его по нажатию на кнопку. Есть метод: public void CreateProductPanel() ...

Добавление класса к элементу списка
Добрый день - пишу функцию - костыль на jQuery, которая бы делал активной ссылку - элемент меню навигации. т.к. в jQuery не ас,...

Добавление класса к динамическому элементу
Ребят... Подгружаются элементы через ajax. Как добавить к ним класс без каких-либо кликов, просто при загрузки страницы? Код: ...

Добавление класса в активному элементу
Добрый день знатоки jQuery Подскажите пожалуйста, как элементу span при нажатии на него присвоить класс .active, и убрать класс при...

Как сделать добавление Attachment-a, только по нажатию на кнопку.
Подскажите, как запретить пользователям добавлять attachment вручную?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

Новые блоги и статьи
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru