jQuery的.load/.empty不加載和DIV

Question

林排空內容試圖加載隱藏在頁面上到內容DIV選擇內容。要做到這我碰到jquery的.load和.empty。

這似乎已經錯地方了，但據我可以看到它應該工作，想法，其中IM在這個問題呢？還有一個更廣泛的問題是.load/.empty是否使用了正確的函數，或者有更簡單的方法嗎？

伊夫附上了我的HTML和JS的下方，也創造了一個的jsfiddle這裏：https://jsfiddle.net/poha5cb2/3/

香港專業教育學院設置如下：

<a id="op-1">Open 1</a><br> 
<a id="op-2">Open 2</a><br> 
<a id="op-3">Open 3</a><br> 

<hr> 

<h2>CONTENT</h2> 
<div id="content"> 

</div> 

<hr> 

<div class="hidden-content-to-be-loaded" style="display: none;"> 
    <div id="one"> 
    <h3>One</h3> 
    </div> 

    <div id="two" class="initial-close"> 
    <h3>Two</h3> 
    </div> 

    <div id="three" class="initial-close"> 
    <h3>Three</h3> 
    </div> 
</div> 

而對於JS香港專業教育學院的書面

$("#op-1").click(function(){ 
       $("#content").empty(); 
     $("#content").load("#one); 
}); 

$("#op-2").click(function(){ 
       $("#content").empty(); 
     $("#content").load("#two); 
}); 


$("#op-3").click(function(){ 
       $("#content").empty(); 
     $("#content").load("#three); 
}); 

Answer 1

load()方法旨在通過發出AJAX請求來從外部URL檢索內容，而不是通過選擇現有元素來移動當前頁面的DOM。您還似乎在選擇器上缺少引號時會出現語法錯誤。

由於所有的內容是在頁面不需要使用AJAX的。如果你稍微重組HTML和使用普通類你既可以改善和通過選擇a通過它的相關內容真實配對指數，並將其顯示，像這樣簡化代碼：

$('.open').click(function(e) { 
 
    e.preventDefault(); 
 
    $('.content').hide().eq($(this).index('.open')).show(); 
 
})

.content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="open">Open 1</a><br> 
 
<a href="#" class="open">Open 2</a><br> 
 
<a href="#" class="open">Open 3</a><br> 
 

 
<hr> 
 

 
<h2>CONTENT</h2> 
 
<div id="content-container"> 
 
    <div class="content"> 
 
     <h3>One</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aut, veniam! Eveniet, repudiandae ipsum? Quas ea assumenda, ullam magnam dolores iste neque harum, repudiandae modi distinctio ratione laborum excepturi ad! 
 
    </div> 
 
    <div class="content"> 
 
     <h3>Two</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aut, veniam! Eveniet, repudiandae ipsum? Quas ea assumenda, ullam magnam 
 
    </div> 
 
    <div class="content"> 
 
     <h3>Three</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aut, veniam! Eveniet, repudiandae ipsum? Quas ea assumenda, ullam magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut sint consequatur saepe, quo beatae exercitationem 
 
     nostrum quos, illum a inventore fuga dignissimos atque iusto. Quis magnam voluptatibus, ipsum cum assumenda. 
 
    </div> 
 
</div>

Answer 2

他們在你的js中缺少"。

嘗試以下代碼：

var $content = $("#content") 
$("#op-1").click(function(){ 
    $content.html($("#one").html()); 
}); 

$("#op-2").click(function(){ 
    $content.html($("#two").html()); 
}); 


$("#op-3").click(function(){ 
    $content.html($("#three").html()); 
}); 

Answer 3

load()用於加載內容的元素從服務器（AJAX）。在這種情況下，它好像你只需要一個隱藏的元素複製到一個可見的元素：

這只是一種複製和粘貼。

$("#op-1").click(function(){ 
    var one_content = $("#one").html();  
    $("#content").html(one_content); 
}); 

有沒有必要使用empty()，因爲所有的內容都被替換。

Answer 4

看起來你可能想jQuery的追加：jQuery Append

這裏有一個更新的小提琴：https://jsfiddle.net/poha5cb2/6/

$("#op-2").click(function() { 
    $("#content").empty(); 
    var $content = $('#two'); 
    $("#content").append($content); 
}); 

基本上得到你想要的內容的引用，然後添加到內容DIV。正如其他答案所說的那樣，使用.html也可以做到這一點。

UPDATE

其他的答案是正確的，因爲附加的元素將導致您的問題，一旦你打電話.empty（）。既然你要替換的HTML，你甚至不會需要調用空：jsfiddle

$("#op-2").click(function() { 
    var content = $('#two').html(); 
    $("#content").html(content); 
});