如何将html页面中的div内容加载到主页上的div中？

Question

我在页面上有一个列表/链接当我单击列表/链接项时，我想将其他页面的div内容加载到主页上的div中。 我知道可以通过如下所示的硬编码来完成。

<div id="main1">
  <ul>      
     <li onclick="load();return false;">Home</li>
     <li onclick="load();return false;">Work</li>    
     <li onclick="load();return false;">Contact</li>                
  </ul>
</div>

<div id="main2"> </div>

function load() {
  $("#main2").load("home.html #title");
}

代替这个，可以将.html作为参数传递吗？ 就像是

<li onclick="load('home.html');return false;">Home</li>

function load(url) {
   $("#main2").load( + url + "#title");
}

感谢您对菜鸟问题的任何帮助和歉意：）

Answer 1

是的，您几乎拥有它。 只需在load()函数中丢失多余的+ ，并在#title之前添加一个空格（以匹配您先前正确的示例）：

 function load(url) {
   $("#main2").load( url + " #title" );
 }

Answer 2

那将是：

function load(url) {
    $("#main2").load( url + " #title");
}

但我建议不要使用内联JS。 我会用类似的东西：

 $(function() { $('#main1 li').on('click', function() { $('#main2').load( $(this).data('url') + ' ' + $(this).data('target') ); }); }); 

 ul li { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="main1"> <ul> <li data-url="home.html" data-target="#title">Home</li> <li data-url="work.html" data-target="#title">Work</li> <li data-url="contact.html" data-target="#title">Contact</li> </ul> </div> <div id="main2"> </div> 

参考文献：

1. .load（）| jQuery API文档 -请参阅“加载加载页面片段”部分