Как активировать функцию в jQuery при загрузке страницы?

Question

[Александр Курбатов]

Вообщем есть у меня навигация:

<nav class="nav">
            <a class="nav__link" href="index.html">Главная</a>
            <a class="nav__link" href="services.html">Услуги</a>
            <a class="nav__link" href="portfolio.html">Портфолио</a>
         </nav>

при переходе на страницу добавляется класс "active"
Осуществляется все это не замысловатой функцией:

$(function() {
          var loc = window.location.href;
     $('.nav [href]').each(function() {
         if (this.href == loc) {
            $(this).addClass('active');
        }
        });
    });

Суть проблемы в том, что при загрузке страницы к элементу:
<a class="nav__link" href="index.html">Главная</a>

не присваивается класс "active", нужно нажать на этот элемент и тогда все заработает.

Answer 1

[Антон Усачев]

Обращение в функции идет к элементам с классом nav, так почему же класс active должен добавиться к элементу с классом nav__link?

<div id="wrap">

	<div class="nav">
		<a href="http://test.test/test.html" class="nav__link">LINK</a>
		<a href="" class="nav__link">LINK</a>
		<a href="" class="nav__link">LINK</a>
		<a href="" class="nav__link">LINK</a>
	</div>

</div>

$(function () {
	var loc = window.location.href;
	
	$('.nav__link').each(function () {
		var theHref = $(this).attr('href');
		
		if (theHref === loc) {
			$(this).addClass('active');
		}
	});
});

Comments

[Александр Курбатов]

не работает.

Может изначально присвоить active первой ссылке, а при клике на другие ссылки удалять этот класс со всех элементов и заново присвоить с помощью этой функции.

Костыль но однако:)

[Антон Усачев]

Александр Курбатов, есть у меня подозрение, что в самом начале атрибут href в ссылке не совпадает с winloc... Сейчас напишу, как это можно решить.

[Антон Усачев]

Александр Курбатов, попробуем от обратного. Если строка адреса из браузера содержит подстроку, совпадающую с рефренсом ссылки, то даем этой ссылке активный класс.

$(function () {

	var winLoc = window.location.href,
		navItemActiveClass = 'active';

	$('.nav__link').each(function () {
		var $navItem = $(this),
			navItemHref = $navItem.attr('href');
		
		if(winLoc.indexOf(navItemHref) !== -1) {
			$navItem.addClass(navItemActiveClass);
		}
	});

});

[Александр Курбатов]

Антон Усачев, не выходит, капец, а как тогда реализовывается вся эта штука, вроде принцип прост.....

[Александр Курбатов]

Антон Усачев, функция вызывается при загрузке страницы, но почему то ждет клика по элементу

[Александр Курбатов]

Антон Усачев, может быть метод .each поменять на что то другое? Есть еще способы реализации?

Answer 2

[Михаил]

попробуй первую строку заменить на:
$(document).ready(function(){

Comments

[Александр Курбатов]

Пробовал, не выходит.

Answer 3

[irishmann]

ready() - выполняет функцию, как только DOM полностью загрузился.

$(document).ready(function() {
    // пиши сюда свой код
});

Comments

[Александр Курбатов]

Я знал об этом и в первую очередь именно это и сделал, но не выходит.