Javascript 从其他HTML文件加载HTML文件中的特定div

我有2页的html。一页只包含所有菜单&这是my index.html。第二个html文件或home.html包含所有菜单的所有数据。我的意思是，来自不同菜单的所有数据都在这个页面中

我想要的是，一旦我单击index.html中的特定菜单，只有该菜单的内容才会显示在home.html中的屏幕上

这是我在index.html中的代码

<div class="list-group topics">
   <a href="home.html #headrest" onclick="headrest_main()" class="list-group-item list-group-item-success sub_topic"><i class="fa fa-circle-o text-red"></i> <span>Headrest Guide Clearance</span></a>
</div>

Home.html

<aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu">
        <!-- <li class="header">MAIN NAVIGATION</li> -->
        <li><a href="#headrest" onclick="headrest()"><i class="fa fa-circle-o text-aqua"></i> <span>Headrest Guide Clearance</span></a></li>
       <!--  <li class="header">LABELS</li> -->
        <li><a href="#structures" onclick="structures()"><i class="fa fa-circle-o text-red"></i> <span>Structures</span></a></li>
        <li><a href="#foams"><i class="fa fa-circle-o text-yellow"></i> <span>Foams</span></a></li>
        <li><a href="#fasteners"><i class="fa fa-circle-o text-teal"></i> <span>Fasteners</span></a></li>
        <li><a href="#recliner"><i class="fa fa-circle-o text-olive"></i> <span>Recliner Mechanism</span></a></li>
        <li><a href="#plastics"><i class="fa fa-circle-o text-teal"></i> <span>Plastics</span></a></li>
        <li><a href="#trims"><i class="fa fa-circle-o text-olive"></i> <span>Trims</span></a></li>
        <li><a href="#seat"><i class="fa fa-circle-o text-olive"></i> <span>Seat Tracks</span></a></li>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header hide">
      <h1>
        Dashboard
        <small>Control panel</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <!-- Main row -->
      <div class="row">
        <div id="headrest">
            <h1 class="title_topic">Headrest Guide Clearance</h1>       
        </div>

      </div><!-- /.row (main row) -->
      <div class="row">
        <div id="structures">
            <h1 class="title_topic">Structures</h1>         
        </div>

      </div><!-- /.row (main row) -->

    </section><!-- /.content -->
  </div><!-- /.content-wrapper -->

仪表板
控制面板

仪表板
头枕导杆间隙
结构

Javascript:

function headrest_main() {
     document.getElementById("headrest").innerHTML='<object type="text/html" data="home.html"></object>';
}

功能头枕_main（）{
document.getElementById（“头枕”）.innerHTML=''；
}

---

但是这里的代码仍然不起作用。是否有一种方法可以加载HTML文件，但只能加载特定的div？这确实是我想要实现的，但我仍然不知道如何实现。

因为您已经标记了

jquery

，我建议您在

jquery

中使用执行此操作，如下所示：

<div class="list-group topics">
   <a href="home.html #headrest" onclick="headrest_main(this)" class="list-group-item list-group-item-success sub_topic"><i class="fa fa-circle-o text-red"></i> <span>Headrest Guide Clearance</span></a>
                                                        ^^^^
</div>

您需要将控件传递给函数，以了解单击了哪个元素，如下所示：

<div class="list-group topics">
   <a href="home.html #headrest" onclick="headrest_main(this)" class="list-group-item list-group-item-success sub_topic"><i class="fa fa-circle-o text-red"></i> <span>Headrest Guide Clearance</span></a>
                                                        ^^^^
</div>

---

更新

不要为所有元素保留

函数

，而是保留一个公共类并捕获

事件，单击

：

Ex:

<div class="list-group topics">
   <a href="home.html #headrest" class="list-group-item list-group-item-success sub_topic"><i class="fa fa-circle-o text-red"></i> <span>Headrest Guide Clearance</span></a>
</div>

---

更新2

确定，因为锚定将具有

href

属性，它将直接执行post并在新页面中加载整个页面，因此您的

加载

将不会执行。因此，您需要防止其默认操作，或者需要在单独的锚属性中提供

url

以获取，即

home.html#headrest

：

解决方案1-防止默认操作

我正在使用第二种捕获点击事件的方法

$(".sub_topic").on('click',function(e){
    e.preventDefault();//this will prevent the default action of anchor
    $("#headrest").load($(this).attr("href"));
});

解决方案2-存储在不同的属性中

更改

href=“#”

并将实际

href

存储在不同的

属性中

<div class="list-group topics">
   <a href="#" data-href="home.html #headrest" onclick="headrest_main(this)" class="list-group-item list-group-item-success sub_topic"><i class="fa fa-circle-o text-red"></i> <span>Headrest Guide Clearance</span></a>
    <!--       ^^^^ store url to load in some data-* attribute -->
</div>

---

您可以使用

$.load

我将如何实现它？类似的讨论：实际上，这并不相似。这是不同的场景。在

index.html

中还有什么？所有内容都会加载，即使不需要。每个锚都有不同的内容displayed@GuruprasadRao是否应在

单击
处理程序中添加
事件.preventDefault（）
。。我也这么想。Anywasy提供了两个单独的演示来实现该功能。让我们试试吧……）谢谢你提供的信息：）它不起作用。当我单击菜单时，它保持在同一页面
<div class="list-group topics">
   <a href="#" data-href="home.html #headrest" onclick="headrest_main(this)" class="list-group-item list-group-item-success sub_topic"><i class="fa fa-circle-o text-red"></i> <span>Headrest Guide Clearance</span></a>
    <!--       ^^^^ store url to load in some data-* attribute -->
</div>

function headrest_main(ctrl) {
     $("#headrest").load($(ctrl).attr("data-href")); //get the value from data-href
}