С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/15: Рейтинг темы: голосов - 15, средняя оценка - 5.00
5 / 5 / 2
Регистрация: 24.08.2015
Сообщений: 302

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

16.07.2017, 10:42. Показов 3252. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru