Активная ссылка при нажатии на JavaScript и CSS
Уроки Активная ссылка при нажатии на JavaScript и CSS
26 июля 2013
5109
активная ссылка на JQuery, активная ссылка на JavaScript и CSS

Активная ссылка при нажатии на JavaScript и CSS

Сложность Рубрика JavaScript Браузеры
Демонстрация » Скачать »

Зачастую многие начинающие веб-программисты, которые хотят сделать синтаксис ссылок более заметным и изящным, задают себе такой вопрос: "Как мне создать активную ссылку, которая была нажата?". Многие сразу мысленно связывают данную ситуацию только с CSS и HTML и выбирают атрибут a:active, который, по их мнению, должен оставлять активную ссылку всегда нажатой. Ну не все понимают, что класс нигде не хранится, он всего лишь только задается и способствует взаимодействию с HTML тегами. Поэтому, чтобы ссылка была активной ее нужно где то хранить, а также задать ей специальную функцию, которая сможет обработать класс и присвоить ей определенное значение. В этот момент, на помощь нам приходит JavaScript.

 

Первый шаг. JavaScript и CSS.

 

Для начала подключаем библиотеку 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.

 

В коде 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 и т.п."

 

Ответ:

 

Абсолютно также, как и выше все было изложено! От ссылок и идентификаторов суть не меняется. Значения остаются такими же!

 

Спасибо за внимание к данному уроку!





Роман Краутер