Смена и добавление стилей

100

29 марта 2021, 21:20

У меня есть событие, которое по клику меняет стили для блоков. Но когда добавил php , то при переходах по ссылкам страница перезагружается и все сбрасывается и не работает.

function menuTrigger(id){
        var a = $(".menu-container").find("a");
        if(a.hasClass("active")){
            a.removeClass("active");
        }
        $("#Menu_" + id).addClass("active");
    }

Работает, только без перезагрузки страницы. Как сделать так что бы стили менялись при переходах между разделами. Код из html

<header>
    <nav class="main-menu">
        <div class="menu-container">
        <?foreach($res as $arItem):?>
            <a id="Menu_<?=$arItem['id']?>" href="<?=$arItem['link'];?>" class="not_active"><?=$arItem['title']?></a>
        <?endforeach?>
            <a href="#" class="logo">LOGO</a>
        </div>
    </nav>
</header>

Answer 1

$('body').on('click', '.menu-container a', function(event) { 
    event.preventDefault();     
    console.log($(this).attr("href")); 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
 
<header> 
    <nav class="main-menu"> 
        <div class="menu-container"> 
          <a href="#1" class="logo">2</a> 
          <a href="#2" class="logo">1</a> 
          <a href="#" class="logo">LOGO</a> 
        </div> 
 
    </nav> 
 
</header>

Answer 2

Для описанной задачи использование js ничего не даст, т.к. подсвечивать ссылки нужно ПОСЛЕ того как пользователь кликнет по ссылке и браузер отрисует запрошенную страницу.

Вы показали чанк с разметкой, который встраивается в шаблон, с помощью которого отображается запрошенный ресурс. Чтобы подсветить в меню пункт-ссылку на текущий ресурс - у вас должен быть заранее, до вывода меню, определен ID текущего ресурса. Тогда в вашем чанке с разметкой достаточно будет сделать что-то типа такого: class="<?= CURRENT_RESOURCE_ID == $arItem['id']? 'active': 'not_active' ?>".

Как определить текущий ресурс - зависит от фреймворка.