0

У меня есть событие, которое по клику меняет стили для блоков. Но когда добавил 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>
1
  • Два варианта или навешивайте при перезагрузке событие, чтобы он опять искал ссылки или что более проще навесить глобальное событие через $('body').on('click', '.menu-container a', function(event) { .... 11 июл 2019 в 13:30

2 ответа 2

0

$('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>

4
  • Semenov Если превент дефолт сделать ссылке,он будет переходить на неё? 11 июл 2019 в 13:44
  • Нет конечно, это пример. Я же не знаю что у вас дальше, возможно у вас аякс запрос и замена данных. Если у вас перечитвыется вся страница, то js тоже обновиться. 11 июл 2019 в 13:47
  • Ну надо классами играться, после обновления стр, есть такая возможность? 11 июл 2019 в 14:17
  • Ну вот используйте через body и все будет гуд, некогда я сам мучался данные на странице менял динамически, а действия не подвешивались, решилось таким образом 11 июл 2019 в 16:36
0

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

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.