如何在點擊時將單獨的html頁面加載到div中？

Question

我對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來使用此功能？

Answer 1

使要附加事件的元素的選擇器更具限制性：

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

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

Answer 3

您正在加載整個html頁面，這意味着您正在加載

<html>...</html>

然后將其全部填充到您的頁面中，這意味着您最終將擁有

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

這是無效的。 如果您要替換頁面中單個<div>的內容，則可以將整個頁面都提取到var中，然后切出所需的塊，或者jquery 僅提取/插入所需的部分，例如

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

請注意.load()調用中的第二個#...參數。 這告訴jquery忽略頁面中除指定元素/ ID之外的所有內容。 只有該ID的內容將被填充到#div_to_replace 。

如何在點擊時將單獨的html頁面加載到div中？

問題描述

3 個解決方案

解決方案1
2 2016-01-11 14:35:50

解決方案2
1 2016-01-11 14:37:49

解決方案3
0 2016-01-11 14:40:01

如何在點擊時將單獨的html頁面加載到div中？

問題描述

3 個解決方案

解決方案1 2 2016-01-11 14:35:50

解決方案2 1 2016-01-11 14:37:49

解決方案3 0 2016-01-11 14:40:01

解決方案1
2 2016-01-11 14:35:50

解決方案2
1 2016-01-11 14:37:49

解決方案3
0 2016-01-11 14:40:01