如何使用 javascript 将 html 文件加载到 div 选项卡中答案

【问题标题】：How to load a html file into div tabs using javascript如何使用 javascript 将 html 文件加载到 div 选项卡中
【发布时间】：2017-08-23 15:00:33
【问题描述】：

我使用引导程序创建了导航选项卡。现在我想在标签点击时将 html 文件加载到标签内容中。谁能帮我写java脚本。

这是我的html：

<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
     <ul class="nav nav-pills nav-stacked">
       <li class="active"><a data-toggle="pill" id="Home" href="#home">Home</a></li>
       <li><a data-toggle="pill" id="Menu1" href="#menu1">Menu 1</a></li>
       <li><a data-toggle="pill" id="Menu2" href="#menu2">Menu 2</a></li> 
     </ul>
    </div>
    <div class="col-sm-9">
      <div class="tab-content">
         <div id="home" class="tab-pane fade in active"> 
         </div>
         <div id="menu1" class="tab-pane fade">    <h3>Menu 1</h3>
         </div>
         <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3>
         </div>
      </div>
    </div> 
  </div>
 </div>
 </body>

在上面的代码中，当我单击主页选项卡时，我想将外部 html(x.html) 文件加载到选项卡内容 div 下的主页 div 中。当我单击 menu1 选项卡（y.html）时，我想要相同的功能。当我加载（y.html）时，我需要隐藏（x.html）。有人请帮助我...！！！

我使用了下面的 javascript。但它不起作用。：

$('a#Home').click(function(){
    $("#home").load("x.html");
});
$('a#Menu1').click(function(){
   $("#menu1").load("y.html");
});

【问题讨论】：

为什么要为内容使用不同的 DIV，只需使用一个 DIV 来加载所需的内容。

标签： javascript jquery html css

【解决方案1】：

您可以使用.hide()、.show()

$('a#Home').click(function(e) {
    e.preventDefault();
    $("#home").load("x.html", function() {
      $("#menu1").hide();
      $(this).show();
    });        
});

$('a#Menu1').click(function(e) {
   e.preventDefault();
   $("#menu1").load("y.html", function() {
     $("#home").hide();
     $(this).show();
   })       
});

【讨论】：

它正在加载 html 文件。但是我在加载的两个 html 文件中都使用了相同的内容。它阻止了某些功能。
“它阻止了某些功能” 不确定您的意思？
在 x.html 文件中，我可以浏览 cpp、java 选项卡。 y.html 也具有相同名称的相同选项卡 cpp、java。但它不是导航。我的疑问是因为这是两个不同的 html 文件，即使标签名称相同，它也应该独立工作。
什么是“cpp,java 标签”？您可以在 plnkr plnkr.co 重现问题吗？