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");
}

感谢您对noob问题的任何帮助和道歉：）

Answer 1

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

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

Answer 2

那将是：

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

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

＆＃13;

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

＆＃13;

ul li {
  cursor: pointer;
}

＆＃13;

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

＆＃13;

<强>参考文献：

.load() | jQuery API Documentation - 请参阅加载加载页面片段部分

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

2 个答案: