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