如何在点击时将单独的 html 页面加载到 div 中？答案

【问题标题】：How to load separate html page into a div on click?如何在点击时将单独的 html 页面加载到 div 中？
【发布时间】：2016-01-11 14:33:06
【问题描述】：

我对 javascript 和 jquery 非常陌生，但我正在尝试创建一个页面，允许用户单击国家/地区名称，该国家/地区的信息将从单独的 html 文件加载到 div 中。

在其他地方，我发现此代码非常适用，使用 <a> 标签上的 .click(function)：

var $j = jQuery.noConflict();

$j(document).ready(function(){
    $j("a").click(function(){
        $j.ajax({
            url: $j(this).attr("href"),
            success: function(response) {
                $j("#partnerContent").html(response);
            }
        });
        return false;
    });
});

这是基本的html：

<div id="contentcontain">
    <div class="partnercol1">
        <div class="container">
            <div id="menu" class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown">International Sales <span class="caret"></span></button>
                <ul class="dropdown-menu scrollable-menu" role="menu">
                    <li><a href="partners/belgium.html">Belgium</a></li>
                    <li><a href="partners/brunei.html">Brunei</a></li>
                    <li><a href="partners/bulgaria.html">Bulgaria</a></li>
                </ul>
            </div>
      </div>
  </div>
  <div class="partnercol2">
      <div id="partnerContent"></div>
  </div>

但是，现在页面上的每个<a> 标签（包括顶部和底部菜单）在单击时都会将它们的href 加载到 div 中。如何仅针对包含状态菜单的 div 来使用此功能？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

使您要附加事件的元素的选择器更具限制性：

// this selects all the anchors below the items with ID menu
$j("#menu a").click(function () {
    ...
});

【讨论】：

谢谢。我最终使用了这个解决方案，因为它效果最好，而且我很容易理解。我还有很多东西要学，谢谢你的帮助。

【解决方案2】：

在您的 html 中，输入：

<ul class="dropdown-menu scrollable-menu" role="menu">
    <li><a class="menu-item" href="partners/belgium.html">Belgium</a></li>
    <li><a class="menu-item" href="partners/brunei.html">Brunei</a></li>
    <li><a class="menu-item" href="partners/bulgaria.html">Bulgaria</a></li>
</ul>

在你的 javascript 中

var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(".menu-item").click(function(){
 $j.ajax({
  url: $j(this).attr("href"),
  success: function(response) {
   $j("#partnerContent").html(response);
  }
});
 return false;
});
});

【讨论】：

【解决方案3】：

您正在加载整个 html 页面，这意味着您正在加载

<html>...</html>

然后将其全部填充到您的页面中，这意味着您最终将拥有

<html>
    ....
    <html>...</html>
    ...
</html>

这是无效的。如果您尝试替换页面中单个 <div> 的内容，那么要么将整个页面提取到 var 中并切出所需的块，要么让 jquery fetch/insert ONLY 你想要的部分，例如

$('#div_to_replace').load('source_of_new.html #id_of_element_to_use_for_replacement');

注意.load() 调用中的第二个#... 参数。这告诉 jquery 忽略页面中除指定元素/ID 之外的所有内容。只有那个 ID 的内容会被填入#div_to_replace。

【讨论】：