如何使用javascript将html文件加载到div标签中

Question

我已经使用引导程序创建了导航标签。 现在，我想在单击选项卡时将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）文件加载到tab-content div下的home 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");
});

Answer 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();
   })       
});

如何使用javascript将html文件加载到div标签中

问题描述

1 个解决方案

解决方案1
0 2017-03-29 22:15:47

如何使用javascript将html文件加载到div标签中

问题描述

1 个解决方案

解决方案1 0 2017-03-29 22:15:47

解决方案1
0 2017-03-29 22:15:47