Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.04.2014, 12:55
Интересующийся
Отправить личное сообщение для Chamus Посмотреть профиль Найти все сообщения от Chamus
 
Регистрация: 21.04.2014
Сообщений: 25

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

После клика и перезагрузки страницы должно быть так:
<a href="#" class="filter active">Фильтр</a>
Ответить с цитированием
  #2 (permalink)  
Старый 24.04.2014, 13:27
Аватар для nice_try
Профессор
Отправить личное сообщение для nice_try Посмотреть профиль Найти все сообщения от nice_try
 
Регистрация: 11.12.2013
Сообщений: 313

пиши в куки
Ответить с цитированием
  #3 (permalink)  
Старый 24.04.2014, 13:28
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

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

Цитата:
пиши в куки
Это разве "навсегда"? Нет. Да еще и не всеми браузерами поддерживается.
Ответить с цитированием
  #4 (permalink)  
Старый 24.04.2014, 13:35
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

для этого есть псевдо-класс давно существующий:
<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>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 24.04.2014 в 13:40.
Ответить с цитированием
  #5 (permalink)  
Старый 24.04.2014, 13:36
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от krasovsky
Да еще и не всеми браузерами поддерживается.
кто куки? хм... какой тогда смысл от браузера который не работает с куками? Вот пример что привел я, с localStorage, вот он не работает в ИЕ7 и ниже... Тут я соглашусь, но кому щас нужен ИЕ7 и старее него??
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #6 (permalink)  
Старый 24.04.2014, 13:47
Аватар для nice_try
Профессор
Отправить личное сообщение для nice_try Посмотреть профиль Найти все сообщения от nice_try
 
Регистрация: 11.12.2013
Сообщений: 313

Сообщение от krasovsky Посмотреть сообщение
Это разве "навсегда"? Нет. Да еще и не всеми браузерами поддерживается.
Почему не навсегда?
Какими браузерами не поддерживается?
Ответить с цитированием
  #7 (permalink)  
Старый 24.04.2014, 15:07
Интересующийся
Отправить личное сообщение для Chamus Посмотреть профиль Найти все сообщения от Chamus
 
Регистрация: 21.04.2014
Сообщений: 25

devote,
Сообщение от devote Посмотреть сообщение
для этого есть псевдо-класс давно существующий:
<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>
Ух ты! Я и не надеялся.
Можете написать код вместо этого условия? Я пока несилен во всяких джейсонах.
<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.

Последний раз редактировалось Chamus, 24.04.2014 в 15:25.
Ответить с цитированием
  #8 (permalink)  
Старый 24.04.2014, 15:45
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от krasovsky
Это разве "навсегда"? Нет. Да еще и не всеми браузерами поддерживается.
чего уж там про эротику вроде CSS3 говорить
Ответить с цитированием
  #9 (permalink)  
Старый 24.04.2014, 16:18
Интересующийся
Отправить личное сообщение для Chamus Посмотреть профиль Найти все сообщения от Chamus
 
Регистрация: 21.04.2014
Сообщений: 25

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как организовать выбор новости из списка (JavaScript + RSS or HTML парсер) Wolfak Общие вопросы Javascript 2 24.02.2014 14:08
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как получить доступ к элементу перед html тэгом konstantinz Events/DOM/Window 2 11.08.2013 14:51
На входе HTML получить на выходе просто текст, как? Dmitry Общие вопросы Javascript 2 25.08.2008 10:42