Question

我有3个HTML文件。现在，我想创建一个带有三个选项卡的HTML文件。我可以创建标签，但不能将每个标签与每个HTML文件相关联，因此，当我单击一个标签时，我希望显示一个HTML文件的内容。

Answer 1

我认为仅凭HTML不可能做到这一点，我能想到的唯一方法是更改选项卡单击时的页面并设置活动类以控制选项卡的显示和隐藏/活动状态。

另一种方法是将这3页中的内容集成到1页中，并在某些JQuery或CSS3中使用show / hide。

更多信息总是有帮助的。

Answer 2

<!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页面的完整源代码。

单个HTML文件中的多HTML文件的选项卡式视图

2 个答案: