Зачастую многие начинающие веб-программисты, которые хотят сделать синтаксис ссылок более заметным и изящным, задают себе такой вопрос: "Как мне создать активную ссылку, которая была нажата?". Многие сразу мысленно связывают данную ситуацию только с CSS и HTML и выбирают атрибут a:active, который, по их мнению, должен оставлять активную ссылку всегда нажатой. Ну не все понимают, что класс нигде не хранится, он всего лишь только задается и способствует взаимодействию с HTML тегами. Поэтому, чтобы ссылка была активной ее нужно где то хранить, а также задать ей специальную функцию, которая сможет обработать класс и присвоить ей определенное значение. В этот момент, на помощь нам приходит JavaScript.
Для начала подключаем библиотеку jquery.min.js. Далее нам потребуется изучить код, который будет работать с активными ссылками. В нем мы создаем функцию и указываем переменную url в которую записываем все ссылки имеющие идентификатор div_a.
Если какая либо ссылка была нажата в диапазоне идентификатора div_a, добавляется класс active!
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
$.each($("#div_a a"),function(){
if(this.href==url){$(this).addClass('active');};
});
});
</script>
Далее прописываем немного стилей для идентификатора div_a a и для класса a.active.
#div_a a
{
font-size: 20px;
padding: 10px;
}
a.active
{
color:red;
font-size: 20px;
text-decoration: none;
}
В коде HTML, который выводит ссылки, мы заключаем их в тег div и даем ему идентификатор div_a, который взаимодействует с кодом выше на JavaScript. Также создаем три ссылки - однотипные: index.php, news.php, contacts.php. Вы же можете любые на Вас вкус!
<div id='div_a'> <a href='index.php'>Главная</a> <a href='news.php'>Новости</a> <a href='contacts.php'>Контакты</a> </div>
Вопросы:
Ко мне был своего рода такой вот вопрос: "Подскажите, как быть с переходами не на конкретную страницу, а на туже ссылку, только с параметром. Допустим: news.php?id=21, news.php?id=39 и т.п."
Ответ:
Абсолютно также, как и выше все было изложено! От ссылок и идентификаторов суть не меняется. Значения остаются такими же!
Спасибо за внимание к данному уроку!