Постоянный цвет элемента после клика по ссылке

[Delat]

Как сделать чтобы после клика на тег a, в теге mark голубая заливка не исчезала?

https://jsfiddle.net/Delat/m7jy4bfe/

[mrnobody]

 

[mrnobody]

Добавьте к ховеру еще и фокус: https://jsfiddle.net/mrnobody/m7jy4bfe/2/

[Delat]

42 минуты назад, mrnobody сказал:

Добавьте к ховеру еще и фокус: https://jsfiddle.net/mrnobody/m7jy4bfe/2/

Этот вариант не подходит. Если кликнуть по любому другому соседнему элементу, то фокус слетает.

[vladmih]

:visited же для ссылки. Будет отрабатывать, когда по ссылке уже кликнули

[Delat]

14 минуты назад, vladmih сказал:

:visited же для ссылки. Будет отрабатывать, когда по ссылке уже кликнули

Цвет должен меняться на голубой, только если кликаем поочередно с html на css. Именно -меняться, а не показываться как посещенные ссылки. С :visited нельзя восстановить цвет на обратный (светло-серый).

Возможные варианты решения:

1. Через :target, но этот вариант отпадает т.к. используется уже в теге a атрибут id.
2. Через :сhecked добавив input и label. В данном случае label будет имитировать цвет активного тега mark.
3. Или с помощью псевдоэлемента.

Второй вариант сделать не получается, третий пока не знаю как сделать. Возможно все проще с помощью jquery или на чистом JS. Но вот как...

Edited February 2, 2017 by Delat

[mrnobody]

https://jsfiddle.net/mrnobody/m7jy4bfe/4/

[Delat]

15 часов назад, mrnobody сказал:

https://jsfiddle.net/mrnobody/m7jy4bfe/4/

Спасибо за пример конечно, но это не то. Кликнув на пустое пространство рядом с блоками li, фон в mark исчезает, а он должен остаться, на выбранном ранее элементе.

Edited February 3, 2017 by Delat

[mrnobody]

https://jsfiddle.net/mrnobody/m7jy4bfe/5/

[Delat]

14 минуты назад, mrnobody сказал:

https://jsfiddle.net/mrnobody/m7jy4bfe/5/

Кликнув поочередно на html5 и css3, заливка осталась там и там, а это немного не то. Если кликнул на html5, то он стал активным и mark окрасился и наоборот, если кликнул на CSS3, то он окрасился, а заливка в html5 исчезла.

[Delat]

Ваш скрипт это чистый JS, как я понимаю. Пробовал разместить его в .html файле и в отдельном .js , проверял всё на отдельных тестовых файлах, но не работает функционал как в jsfiddle.

Возможно скрипт необходимо чуть переделать в  функцию, тогда будет работать?

[Delat]

Да, это то что и надо. Большое спасибо! Единственное, почему-то в шаблоне не работает, наверное конфликт скриптов, а если тестировать на отдельных файлах .html, .js .css, то работает.

А по какой книге вы изучили dom и js?

Edited February 3, 2017 by Delat

[mrnobody]

45 минут назад, Delat сказал:

А по какой книге вы изучили dom и js?

http://learn.javascript.ru/

[Delat]

Нашел причину почему не работает в шаблоне. Если убрать этот код то ваш скрипт работает на сайте:

jQuery(document).ready(function($)
    { $(".category-content").hide();

    $(".category li:first a").addClass("active-link").show();
    $(".category-content:first").show();

    $(".category li a").click(function()
    
    { $(".category li a").removeClass("active-link a");
    $(this).addClass("active-link");
    $(".category-content").hide();
    var activeTab = $(this).attr("href");
    $(activeTab).fadeIn(); return false; });
});

Подскажите пожалуйста, что изменить в вашем коде чтобы он заработал вместе с этим?

[mrnobody]

Может вам проще воспользоваться готовым плагином для табов? )

http://vdw.github.io/Tabslet/

[Delat]

Весьма искусно. Теперь работает)

За  ссылку спасибо! Эх, если бы я её раньше увидел.

а где лучше выучить jQuery?

Edited February 3, 2017 by Delat