Javascript Jquery.load/.empty不从div加载和清空内容

我试图将隐藏在页面上的选定内容加载到内容分区中。为此，我遇到了jquery的.load和.empty

它似乎在某个地方出了问题，但据我所知，它应该会起作用，我在这方面哪里出了问题？还有一个更广泛的问题是.load/.empty要使用正确的函数，还是有更简单的方法

我在下面附上了我的html和Js，并在这里创建了一个JSFIDLE：

我设置了以下内容：

<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中丢失了

请尝试以下代码：

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

load用于将内容从服务器ajax加载到元素。在这种情况下，您似乎只想将隐藏元素复制到可见元素：

这只是一种复制和粘贴

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

没有必要使用empty，因为所有内容都已被替换。

加载方法旨在通过发出AJAX请求从外部URL检索内容，而不是通过选择现有元素在当前页面的DOM中移动。您似乎还有一个语法错误，选择器上缺少引号

因为所有内容都在页面中，所以根本不需要使用AJAX。如果您稍微重新构造HTML并使用公共类，您可以通过从a中选择相关内容（按其匹配索引）并显示它来改进和简化代码，如下所示：

$'.open'。单击函数E{ e、 防止违约； $'.content.hide.eq$this.index.open.show； } .内容{ 显示：无； } 所容纳之物 一个叫Lorem ipsum dolor sit amet的人，奉献给精英们。我是奥特，维尼安！伊万尼特，伊普苏姆共和国？假设是这样的，那么，除了广告之外，劳动权利的区别是不存在的！ 两个洛雷姆·伊普苏姆·多洛尔坐在阿梅特，奉献给精英们。我是奥特，维尼安！伊万尼特，伊普苏姆共和国？阿苏门达，乌拉姆·马格纳姆 三个洛雷姆·伊普苏姆·多洛尔·塞特（Lorem ipsum dolor sit amet），是一位杰出的献身者。我是奥特，维尼安！伊万尼特，伊普苏姆共和国？这是一个假设，乌兰·马格纳姆。Lorem ipsum dolor sit amet，奉献精英。但在圣佩佩省，比泰省实习 诺斯特鲁姆·库斯（nostrum quos）是一位发明家。这是一种巨大的自慰、自慰和自慰。

---

看起来您可能需要jQuery的附加：

这是最新的提琴：

基本上，获取对所需内容的引用，然后将其添加到content div中。正如其他答案所说，也可以使用.html完成同样的操作

更新

其他答案是正确的，因为一旦调用.empty，追加元素将导致问题。由于要替换html，您甚至不需要调用empty：

---

我相信您的意思是$'two'应该是$'two'。htmlI使用append将jQuery元素放入，这就是为什么我没有使用.html。但后来我才意识到，如果你点击同一个按钮两次，它就会出错并停止显示。因为我在附加元素，所以调用empty会清除我想的元素？正在使用.html重试，谢谢！

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

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

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