Замена контента из ссылки в панели навигации

Question

Есть панель навигации:

<ul id="nav" class="nav">
  <li><a class="smoothscroll" href="general.php">Главная</a></li>
  <li><a class="smoothscroll" href="news.php">Новости</a></li>
  <li><a class="smoothscroll" href="#about">О нас</a></li>
  <li><a class="smoothscroll" href="#contact">Контакт</a></li>
</ul>

Есть js скрипт, который заменяет контент в области контейнера body-container при нажатии на ссылку:

window.onload = function () {
    let parent = document.getElementById('nav');
    let a = parent.getElementsByTagName('a');

    for(let i=0;i<a.length;i++){
        a[i].addEventListener('click', function () {
            event.preventDefault();
            let href = a[i].href;
            $("#body-container").empty().load(href);
        })
    }
}

Замена контента из news.php проходит нормально, но когда я пытаюсь заменить на недостающую часть от index.php, которая находится в general.php перестает нормально работать часть блоков, что исправить у меня не получилось и слишком трудозатратно. Для себя вижу выход в прицельной обработке ссылок из js скрипта по типу такого кода:

 window.onload = function () {
     for (let news of document.body.children) {
        if (news.matches('a[href$="news.php"]')) {
            news.addEventListener('click', function () {
                event.preventDefault();
                let href = news.href;
                $("#body-container").empty().load(href);
            });
        } 
     } 
 }

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

Upd. Обновил нижний js код, исправил ошибку, теперь он просто не работает.

Answer 1

Постарался добавить больше комментариев для понимания.

Вы пробовали получить элементы через document.body.children, что возвращало Вам один элемент ul, так как в боди один child этот элемент.
А уже в этом элементе другие элементы.
В каждом элементе ul есть child элемент li, а в каждом элементе li есть chiled элемент a.
По этому Вы не могли получить href этой ссылки.
Что касается news.matches('a[href$="news.php"]') , то в этом случае Вы пытались найти подобный элемент, в ul, и соответсвенно его не было.
Если Вы хотите добавить подобную проверку, у Вас будет подгружаться контент только по нажатии на кнопку main.php игнорируя другие.
Если Вы хотите подгружать контент каждой ссылки, то лучше использовать так:

    window.onload = function () {
        let ul = document.getElementById('nav').children; // Получаем элементы не всего body (Так как в такой выборке будет только один элемент ul) в сразу получаем все child этого ul по id
        for (let news of ul) { // Для каждого элемента li ( Так как в ul у нас элементы li, а уже в них <a>
            let a = news.children[0]; // Получаем его child - элемент <a>( Который вложен в каждый li )
            a.addEventListener('click', function () { // Слушаем событие нажатия кнопки
                event.preventDefault(); // Убираем стандартный переход по ссылке.
                let href = a.href; // Получаем ссылку элемента
                console.log(href);
                let fileName = href.split('/').pop(); // Так как ссылка в файле указывается относительно проекта, тоесть https://localhost:32432/... и так далее, то разделяем ссылку по / и получаем последний элемент.
                $("#body-container").empty().load(fileName); // Очищаем элемент и загружаем туда ссылку.
            });
        }
    }

<ul id="nav" class="nav">
    <li><a class="smoothscroll" href="general.php">Главная</a></li>
    <li><a class="smoothscroll" href="loadFile.php">Новости</a></li>
    <li><a class="smoothscroll" href="#about">О нас</a></li>
    <li><a class="smoothscroll" href="#contact">Контакт</a></li>
</ul>

<div id="body-container"></div>

Для выборки только одного элемента:

    window.onload = function () {
        $("a[href^='main.php']").on('click', function (event) {
            event.preventDefault(); // Убираем стандартный переход по ссылке.
            let z = $("a[href^='main.php']").attr('href');
            $("#body-container").empty().load(z); // Очищаем элемент и загружаем туда ссылку.
        });
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" class="nav">
    <li><a class="smoothscroll" href="general.php">Главная</a></li>
    <li><a class="smoothscroll" href="main.php">Новости</a></li>
    <li><a class="smoothscroll" href="#about">О нас</a></li>
    <li><a class="smoothscroll" href="#contact">Контакт</a></li>
</ul>

<div id="body-container"></div>

БЛОГ НА HUSL

Замена контента из ссылки в панели навигации

Ответы (1 шт):