Какие теги указать js скрипте для меню?

Question

[khomaldi]

Есть html:

<nav>
    <ul>
        <li><a href="index.php" class="">Главная</a></li>
        <li><a href="about.php" class="">Новости</a></li>
        <li><a href="about.php" class="">Услуги</a></li>
        <li><a href="about.php" class="">Проекты</a></li>
        <li><a href="about.php" class="">О нас</a></li>
        <li><a href="about.php" class="">Контакты</a></li>
        <li><a href="about.php" class="introduce">Презентация</a></li>
    </ul>
</nav>

Есть css:

nav ul a.active {
    font-weight: bold;
    text-decoration: underline;
    color: #a29061;
}

Есть js:

var link = window.location.pathname;
 $('???? a [href="'+link+'"]').parent().addClass('active')

Вопрос: какие теги нужно указывать вместо "????", чтобы было правильно? Если просто написать: <a href="" class="active"></a>, то всё работает. А если через js, то пытался разные вариации, но не работает.

Возможно, это чуть прояснит ситуацию: тык-тык

Comments

[Andrew]

А что должно происходить при нажатии?

[khomaldi]

Andrew, js->к a href добавится class="active"

[Andrew]

Георгий,

$('ul>li>a').click(function(){
$(this).addClass('active');
});

[khomaldi]

Andrew, Получается: применяется класс только при нажатии. Потом ссылка становится обычной.

[Stalker_RED]

Георгий, ну да. а чего вы хотите?

[khomaldi]

Stalker_RED, вот тут обратите внимание на верхнее меню. Если мы на странице "Контакты", то подсвечивается пункт "Контакты" в меню сайта. Вот я так же хочу.

Answer 1

[Mysterion]

$('a').on('click', function() {
    $(this).addClass('active');
});

Comments

[khomaldi]

Получается: применяется класс только при нажатии. Потом ссылка становится обычной.

[Mysterion]

Георгий, потом - это когда?

[khomaldi]

Mysterion, когда я нажимаю на ссылку, она на секунду становится выделенной.(к ней применился класс active). Но когда страница прогружается (я же нажал на ссылку, страница грузится), то ссылка становится обычной. Посмотрите, что я хочу получить тык-тык

[Mysterion]

$().ready(function () {
	$("ul > li").each(function(n) {
  	var a = $(this).find('a');
		if(window.location.pathname === a.attr('href')) {
    	a.addClass('active');
		}
	});
});

Answer 2

[profesor08]

Названия говорят сами за себя.

.menu
.menu-item
.is-active

Далее, отталкиваясь от корневого элемента, взаимодействуй с дочерними.

$(".menu").each(function() {
  let $menu = $(this);
  let $menuItems = $menu.find(".menu-item");

  // по клику убирается класс is-active со всех пунктов конкретного меню и добавляется тому, по которому был клик.
  $menuItems.on("click", function() {
    $menuItems.removeClass("is-active");
    $(this).addClass("is-active");
  });
});

Answer 3

[Борис]

Впиши в nav id #menu (например) и вместо ???? пишешь, #menu li

Comments

[khomaldi]

не работает

[Борис]

Георгий Хомалдишвили, попробуй добавить / перед index.php и about.php
Т.к. location.pathname возвращает полный путь до документа от начального адреса вместе с /
Или если к странице с этим меню долгий путь, впиши alert(location.pathname) и используй в href путь который у тебя высветится

[Борис]

А лучше используй

var link = window.location.pathname.substr(1); //.substr(1) удаляет первый символ в строке 
   $('#menu li a[href="'+link+'"]').parent().addClass('active')

Answer 4

[Stalker_RED]

$('nav a[href="'+link+'"]').parent().addClass('active')

если у вас не один nav на странице, то сработает для каждого.
или можно указать нужному меню какой-то особый класс
обратите внимание, после a пробела не должно быть