Вкладка Просмотр нескольких файлов HTML в одном файле HTML - PullRequest
Новая
       1

Вкладка Просмотр нескольких файлов HTML в одном файле HTML

0 голосов
/ 19 ноября 2018

У меня есть 3 HTML-файла.Теперь я хотел бы создать файл HTML с тремя вкладками.Я могу создавать вкладки, но не могу связать каждую вкладку с каждым HTML-файлом, чтобы при нажатии на вкладку отображалось содержимое одного HTML-файла.

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018 
<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};
</script>

<body>

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>

    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <h3>London</h3>
<div w3-include-html="contact.html"></div> 
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
     <h3>Paris</h3>
<div w3-include-html="contact1.html"></div>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <h3>Tokyo</h3>
<div w3-include-html="contact2.html"></div>
    </div>
  </div> 

<script>
includeHTML();
</script>

</body>
</html>

этот полный источник для включения HTML-страницы в несколько HTML-страниц.

0 голосов
/ 19 ноября 2018

Я не думаю, что это возможно сделать в одном только HTML, единственный способ, о котором я могу думать, - это изменение страниц при нажатии на вкладку и установка активного класса для управления отображением и скрытием вкладок / активного состояния.

Другой способ - объединить содержимое этих 3 страниц в 1 страницу и использовать show / hide с некоторыми JQuery или CSS3.

Больше информации всегда полезно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...