Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как привязать class к html элементу НАВСЕГДА? (https://javascript.ru/forum/jquery/46792-kak-privyazat-class-k-html-ehlementu-navsegda.html)

Chamus 24.04.2014 12:55

Как привязать class к html элементу НАВСЕГДА?
 
Здравствуйте всем.
Как сделать чтобы при нажатии на ссылку ей задавался класс стиля и после перезагрузки странице там же и остался. Наверное вряд ли такое можно сделать c помощью jQuery, но все же может кто-нибудь знает решение такой задачи с помощью js или другого web языка.
<a href="#" class="filter">Фильтр</a>

После клика и перезагрузки страницы должно быть так:
<a href="#" class="filter active">Фильтр</a>

nice_try 24.04.2014 13:27

пиши в куки

krasovsky 24.04.2014 13:28

Прибить гвоздем, тогда не убежит.
А вообще для этого используется запись в базу данных и серверный язык.

Цитата:

пиши в куки
Это разве "навсегда"? Нет. Да еще и не всеми браузерами поддерживается.

devote 24.04.2014 13:35

для этого есть псевдо-класс давно существующий:
<style>
  a:visited {
    color: green; // если ссылка зеленая, значит по ней уже тыкали
  }
</style>
<a href="#test">Нажми меня</a>

Ну а если все же нужно привязать класс, то это делается примерно так (самый грубый вариант):
<style>
  a.active::after {
    content: "(ты тыкал меня уже)";
    padding: 0 0 0 5px;
  }
</style>
<a href="#test1" onclick="addActiveClass(this);">Нажми меня</a><br />
<a href="#test2" onclick="addActiveClass(this);">Нажми и меня</a><br />
<a href="#test3" onclick="addActiveClass(this);">И про меня не забудь</a><br />
<script>
  function addActiveClass(anchor) {
    var items = JSON.parse(window.localStorage.getItem('links') || "{}");
    if (anchor) {
      items[anchor.getAttribute('href', 2)] = 1;
    }
    for(var key in items) {
      if (items.hasOwnProperty(key)) {
        document.querySelector('a[href="' + key + '"]').className += ' active';
      }
    }
    window.localStorage.setItem('links', JSON.stringify(items));
  }
  addActiveClass();
</script>

devote 24.04.2014 13:36

Цитата:

Сообщение от krasovsky
Да еще и не всеми браузерами поддерживается.

кто куки? хм... какой тогда смысл от браузера который не работает с куками? Вот пример что привел я, с localStorage, вот он не работает в ИЕ7 и ниже... Тут я соглашусь, но кому щас нужен ИЕ7 и старее него??

nice_try 24.04.2014 13:47

Цитата:

Сообщение от krasovsky (Сообщение 309054)
Это разве "навсегда"? Нет. Да еще и не всеми браузерами поддерживается.

Почему не навсегда?
Какими браузерами не поддерживается?

Chamus 24.04.2014 15:07

devote,
Цитата:

Сообщение от devote (Сообщение 309055)
для этого есть псевдо-класс давно существующий:
<style>
  a:visited {
    color: green; // если ссылка зеленая, значит по ней уже тыкали
  }
</style>
<a href="#test">Нажми меня</a>

Ну а если все же нужно привязать класс, то это делается примерно так (самый грубый вариант):
<style>
  a.active::after {
    content: "(ты тыкал меня уже)";
    padding: 0 0 0 5px;
  }
</style>
<a href="#test1" onclick="addActiveClass(this);">Нажми меня</a><br />
<a href="#test2" onclick="addActiveClass(this);">Нажми и меня</a><br />
<a href="#test3" onclick="addActiveClass(this);">И про меня не забудь</a><br />
<script>
  function addActiveClass(anchor) {
    var items = JSON.parse(window.localStorage.getItem('links') || "{}");
    if (anchor) {
      items[anchor.getAttribute('href', 2)] = 1;
    }
    for(var key in items) {
      if (items.hasOwnProperty(key)) {
        document.querySelector('a[href="' + key + '"]').className += ' active';
      }
    }
    window.localStorage.setItem('links', JSON.stringify(items));
  }
  addActiveClass();
</script>

Ух ты! Я и не надеялся. :yes:
Можете написать код вместо этого условия? Я пока несилен во всяких джейсонах.
<a href="#" class="filter">Фильтр</a>

this.listenTo(this.model, 'change filter', function (model, value) {
var value = model.get('filter');
if (value) {
	$('a.filter', this.$el).addClass('active');
} else {
	$('a.filter.active', this.$el).removeClass('active');
	}
});


if (value), то присвоить класс
else - удалить класс

$el - принадлежность ссылки к объекту. у меня несколько объектов с одинаковыми ссылками filter.

melky 24.04.2014 15:45

Цитата:

Сообщение от krasovsky
Это разве "навсегда"? Нет. Да еще и не всеми браузерами поддерживается.

:lol: чего уж там про эротику вроде CSS3 говорить

Chamus 24.04.2014 16:18

melky,nice_try,
Это не навсегда, но мою задачу решает.


Часовой пояс GMT +3, время: 07:56.