Как я могу изменить содержание тела, нажав на какую-нибудь кнопку

Question

Я использую JQuery Для загрузки панели навигации и тела моего веб-сайта, и я хочу изменить содержимое тела. Нажмите на какую-нибудь кнопку на панели навигации. Могу ли я использовать JavaScript для этого? как я могу?

Пожалуйста, я искал решение, но ничего не нашел. Заранее спасибо

html

 <header>
      <script>
        $(function () {
          $("header").load("./dist/includes/navbar.html");
        });
      </script>
    </header>
    <!-- END of Section NavBar  -->
    <main>
      <script>
        $(function () {
          $("main").load("./dist/includes/home.html");
        });
      </script>
    </main>
    <!-- Section Footer  -->
    <footer class="footer">
      <script>
        $(function () {
          $("footer").load("./dist/includes/footer.html");
        });
      </script>
    </footer>

Я хочу изменить дом. html загруженный файл, когда я нажимаю кнопку с id = "nav- ссылка "

Вот скриншот

Answer 1

Рассмотрим следующий код.

$(function() {
  // Load content
  $("header").load("./dist/includes/navbar.html");
  $("main").load("./dist/includes/home.html");
  $("footer").load("./dist/includes/footer.html");

  // Prpgram Events
  $("header").on("click", "button", function(ev) {
    console.log("Nav Button was clicked");
    $("main p").append("<a href='#'>New Page</a>");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Section NavBar  -->
<header></header>
<!-- END of Section NavBar  -->
<main></main>
<!-- Section Footer  -->
<footer class="footer"></footer>
<!-- END of Section Footer  -->

Используя jQuery, мы загружаем контент. Так как в DOM на ready контент не существовал, мы будем использовать .on() для делегирования обратных вызовов событий для элементов, которые теперь были загружены.

Так что если в заголовок было добавлено следующее HTML , например:

<button>Show Link</button>

При щелчке по нему выполняется анонимный обратный вызов и добавляется ссылка на главную.

См. подробнее: https://api.jquery.com/on/

Было бы лучше использовать серверные сценарии для построения HTML. Многие из них имеют функцию или функцию «Включить», которые могут добавлять страницы в «Вывод» перед отправкой в ​​браузер, чтобы клиент мог работать со всем содержимым заранее.