Блог

Главная - Вопросы по программированию - Изменение поведения по умолчанию с помощью jquery addClass()/removeClass()

Изменение поведения по умолчанию с помощью jquery addClass()/removeClass()

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Hii Я новичок в jquery, и я хочу добавить / удалить активный класс в / из тега li, пока не будет нажата другая ссылка для навигации. В настоящее время я использую одну и ту же навигацию для всех моих Html-страниц.

Это мой index.html файл

 <body>
    <div id="nav_bar">
        <!-- <a href="navigation/navigation.html">link</a> -->
    </div>
    <script>
        $(function() {
            $("#nav_bar").load("navigation/navigation.html");
        });
    </script>
</body>

Я применил тот же метод для других Html-файлов, и он работает нормально.

Navgation.html

 <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end " id="nav_global ">
        <button class="navbar-toggler " type="button " data-toggle="collapse " data-target="#navbarNav" aria-controls="navbarNav " aria-expanded="false " aria-label="Toggle navigation ">
        <span class="navbar-toggler-icon "></span>
      </button>
        <div class="collapse navbar-collapse " id="navbarNav ">
            <ul class="nav navbar-nav mr-auto ">
                <li class="nav-item active" id="home ">
                    <a class="nav-link " href="/assignment/index.html ">Home</a>
                </li>
                <li class="nav-item " id="assignment ">
                    <a class="nav-link " href="/assignment/assign/assignment.html ">Assignment</a >
                </li>
            </ul>
        </div>
    </nav>

    <script>
        alert("hello from script ");


        $("li.nav-item").click(function(event) {
            let someVar = $(this).hasClass("active");
            alert(someVar);
            if (someVar == false) {
                $("li.nav-item").each(function(i) {
                    $(this).removeClass("active");
                });
                $(this).addClass("active");

            }
        });
    </script>
</body>

Теперь проблема в том, что когда я нажимаю на ссылку и после отображения предупреждения изменения немедленно возвращаются обратно, это означает, что home снова становится активным даже после использования removeClass(). Каким-то образом изменения, внесенные в ссылки, по которым нажал addClass, временно приводят к тому, что главная страница снова становится активной. Я использовал как return false, так и event.preventDefault(), но это мешает моей ссылке открыться, чего я не хочу.
Я хочу, чтобы класс clicked link li был активным.

ps: извините за мой плохой английский и объяснение. Пожалуйста, не стесняйтесь исправить мой вопрос, если вы обнаружите какую-то ошибку.
Спасибо

Комментарии:

1. Ваш код работает нормально. Когда я нажимаю на home, active класс добавляется, и когда я нажимаю на assignment active , добавляется к нему.

2. @AlwaysHelping но у меня не работает. Но не могли бы вы поделиться со мной тем, как вы это тестировали?

3. Здесь все работает нормально: jsfiddle.net/tgu7Lr8c/2 — Дайте мне знать

4. Навигационные ссылки выглядят как настоящие ссылки, поэтому они будут выполнять переход страницы. Это означает, что ваша старая страница и все изменения, внесенные javascript, будут уничтожены. Вы уже частично обнаружили это при попытке использования возврата false и предотвращения default. Тот факт, что это препятствует навигации по странице, показывает вашу проблему. Если вы хотите, чтобы классы сохранялись, вам нужно будет добавить логику для восстановления активного класса по нужной ссылке после загрузки страницы.

5. ……или, возможно, event delegation на динамически добавляемом элементе из .load @Taplar?

Ответ №1:

Взяв только две ссылки, которые у вас есть в вашей операционной системе, вот что я бы предложил попробовать.

 <script>
    $( () => {
        const data = [
            { suffix: '/index.html', selector: '#home' },
            { suffix: '/assignment.html', selector: '#assignment' }
        ];

        const currentPage = data.find( it =>
            window.location.href.endsWith( it.suffix )
        );

        if ( currentPage ) {
            $( currentPage.selector ).addClass( 'active' );
        }
    } );
</script>

В document ready вы создаете список карт, создавая связь между URL-адресом для каждой страницы и селектором для ссылки на эту страницу. Затем вы можете найти связь на основе текущего URL, и если вы ее найдете, найдите ссылку и поместите в нее активный класс.