Загрузка html файлов без перезагрузки страницы

Question

Как реализовать этот вариант но без PHP? Я новичек, для меня это "китайская грамота" Вот мой код:

<html>

<head>
  <title>Makar</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="description" content="" />
  <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
  <script type="text/javascript" src="js/jquery/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="js/js.js"></script>
  <style>
    article {
      display: block;
      margin-top: 35px;
      float: left;
      width: 100%;
      height: 100%;
      border: 1px solid rgba(33, 43, 52, 1);
    }
    
    #nav {
      position: fixed;
      top: 0px;
      left: 1px;
      right: 1px;
      background: rgb(81, 92, 102) linear-gradient(rgb(81, 92, 102), rgb(69, 78, 87));
      min-width: 1025px;
    }
    
    #nav ul {
      list-style: none;
      text-align: left;
      margin: 6px auto 0px auto;
      padding-top: 2px;
      padding-left: 0px;
      width: 100%;
    }
    
    #nav ul {
      display: inline;
      float: left;
      margin: 0px 2px;
    }
    
    #nav li {
      display: inline-block;
    }
    
    #nav a {
      font-weight: bold;
      float: left;
      padding: 10px 4px;
      color: #999;
      text-decoration: none;
      border: 1px solid rgba(33, 43, 52, 1);
      cursor: pointer;
      background: rgb(81, 92, 102) linear-gradient(rgb(81, 92, 102), rgb(69, 78, 87));
      height: 15px;
      line-height: 16px;
    }
  </style>
</head>

<body>
  <div id="nav">
    <ul>
      <li>
        <a class="button0" tabindex="0"></a>
      </li>
      <li><a class="button1" tabindex="0">Link 1</a></li>
      <li><a class="button1" tabindex="0">Link 2</a></li>
      <li><a class="button1" tabindex="0">Link 3</a></li>
      <li><a class="button1" tabindex="0">Link 4</a></li>
      <li><a class="button1" tabindex="0">Link 5</a></li>
    </ul>
  </div>
  <main>
    <article id="article">
      <h1>фиксированный</h1>
    </article>
    <aside id="aside1"></aside>
  </main>
</body>

</html>

Для каждой ссылки есть свой html: Link 1=1.html; Link 2=2.html и т.д. Подскажите, что и куда добавить, чтобы при нажатии на ссылку страницы подгружались в блоке article,как здесь

Answer 1

что-то типа такого в меню

  <li><a href="#" onclick="$('#article').load('page1.html')">Link 1</a></li>

БЛОГ НА HUSL

Загрузка html файлов без перезагрузки страницы

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