從其他HTML文件加載HTML文件中的特定div

Question

我有2頁html。 一頁僅顯示所有菜單，這是我的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>';
}

但是這里的代碼仍然無法正常工作。 有沒有一種方法可以加載HTML文件，但只能加載特定的div？ 這確實是我想要實現的，但我仍然不知道該怎么做。

Answer 1

由於您已經標記了jquery建議您使用.load在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>

然后使用.load

function headrest_main(ctrl) {
     $("#headrest").load($(ctrl).attr("href"));
}

---

更新

與其保留所有元素的function ，不如保留一個通用類並捕獲event click ：

例如：

<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>

假設sub_topic是所有anchors的通用類，則可以捕獲以下event ，而不用添加onclick

$(".sub_topic").on('click',function(){
    $("#headrest").load($(this).attr("href"));
});

---

更新2

好的，因為錨點將具有href屬性，所以它將直接執行發布並將整個頁面加載到新頁面中，因此您的load將不會執行。 因此，您需要阻止其默認操作，或者需要在單獨的錨屬性中提供要獲取的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存儲在其他attribute

<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>

和在JS中

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