Форум Сайтостроение Веб-строительство

Активация ссылки JS

O
На сайте с 23.09.2014
Offline
76
Osavul
906

Как сделать активной (выделенной цветом или фоном) ссылку сделав клик по ней, и чтобы это выделение сохранялось после перехода (перезагрузки страницы)? 



<span id="pagination">

	<a href="#">1</a>

	<a href="#">2</a>

	<a href="#">3</a>

	<a href="#">4</a>

	<a href="#">5</a>

	<a href="#">6</a>

	<a href="#">7</a>

</span>

totamon
На сайте с 12.05.2007
Offline
437
totamon
#1

даже боюсь представить зачем вам это понадобилось)) в смысле JS зачем? обычно этим скрипт занимается который выводит страницу и формирует этот список пагинации. ну при желании можно заморочиться и через cookie сохранять при клике id ссылки, и при загрузке читать и присваивать активной ссылке стиль.

Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
Coolmac
На сайте с 08.09.2011
Offline
60
Coolmac
#2

Можно еще пробежаться по всем href на странице. И если есть такой который равен url этой страницы - подсветить эту ссылку.

Доступные vps/ds с грамотной тех. поддержкой (https://my.friendhosting.net/pl.php?11304)
werty1001
На сайте с 30.03.2008
Offline
82
werty1001
#3

Можно так, (нужна jquery) 

$('#pagination a').each(function(i){

    

    var a=$(this),index=i;



    localStorage.getItem('pagination_active')==index&&a.addClass("active");

        

    a.on('click',function(){

        

        a.addClass('active').siblings().removeClass('active');            

        localStorage.removeItem('pagination_active');

        localStorage.setItem('pagination_active',index);

        

    });

    

});

Живой пример тык

Магазин аккаунтов с балансом Litres,DNS,Ozon,Rotapost и еще 50+ других сервисов тут - vk.cc/7QK0Sk
alexspb
На сайте с 14.11.2005
Offline
187
alexspb
#4

Почему нельзя обойтись без JS?

Такие вещи принято прописывать в стилях:

a:visited { ... }

http://htmlbook.ru/css/visited

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий