Javascript 用JQuery替换div内容

我有一些图像，当你点击它们时，我想在下面显示一个特定的div文本。 由于某些原因，这只在第一次单击时起作用

滚动内容是放置内容的div按摩、禅宗、灵魂是图像链接。容器div保存

信息

      <section id = "image">
    <a href="#" ><img id ="massage"></a>...
       </section>
        <section id = "scroll-content">
            <div id = "container1">
                         ...
                     </div>
             </section>


 $('#massage').click(function() {

    var htmlString = $( '#container2').html();

  $('#scroll-content').html(htmlString);
});

$('#zen').click(function() {

     var htmlString = $( '#container1').html();
  $('#scroll-content').html(htmlString);
});


$('#soul').click(function() {

    var htmlString = $( '#container3').html();
$('#scroll-content').html( htmlString );
});

...
...
$（“#按摩”）。单击（函数（）{
var htmlString=$（'#container2'）.html（）；
$（'#滚动内容'）.html（htmlString）；
});
$（'#zen'）。单击（函数（）{
var htmlString=$（'#container1'）.html（）；
$（'#滚动内容'）.html（htmlString）；
});
$（“#灵魂”）。单击（函数（）{
var htmlString=$（'#container3'）.html（）；
$（'#滚动内容'）.html（htmlString）；
});

您正在替换

滚动内容

div下的html，它包含所有

容器

div

s，因此在替换html后会丢失，这就是它第一次工作的原因

与此相反，只需设置show/hide

container

div

s，它位于

滚动内容

中

如下图所示：

$('#massage').click(function() {
   $('[id^="container"]').hide();
   $('#container2').show();
});

$('#zen').click(function() {
  $('[id^="container"]').hide();
   $('#container1').show();
});


$('#soul').click(function() {

   $('[id^="container"]').hide();
   $('#container3').show();
});

实际工作代码：

您的示例不止一次有效，因为当您启动指令时

$('#scroll-content').html(htmlString);

实际上，您正在覆盖所在部分的内容

 #container1, #container2, [...]

这些都是存储的

<section id = "scroll-content">
            <div id = "container1"> //You are going to delete me.
                         ...
                     </div>
  </section>

//你要删除我。
...

必须更改代码才能添加一个虚拟容器。 因此：

...
...
...
$（“#按摩”）。单击（函数（）{
var htmlString=$（'#container2'）.html（）；
$（'#dummy_container'）.html（htmlString）；
});
$（'#zen'）。单击（函数（）{
var htmlString=$（'#container1'）.html（）；
$（'#dummy_container'）.html（htmlString）；
});
$（“#灵魂”）。单击（函数（）{
var htmlString=$（'#container3'）.html（）；
$（'#dummy_container'）.html（htmlString）；
});

如果希望新内容显示在以前的内容下面，则必须添加新内容<代码>html（）将替换以前的内容

$('#massage').click(function() {
    var htmlString = $( '#container2').html();
    $('#scroll-content').append(htmlString);
});

$('#zen').click(function() {
     var htmlString = $( '#container1').html();
     $('#scroll-content').append(htmlString);
});


$('#soul').click(function() {
    var htmlString = $( '#container3').html();
    $('#scroll-content').append( htmlString );
});

---

请分享ITJSFIDLE pls的JSFIDLE，还有您的jquery是否包装在

$（文档）.ready（）

？

$('#massage').click(function() {
    var htmlString = $( '#container2').html();
    $('#scroll-content').append(htmlString);
});

$('#zen').click(function() {
     var htmlString = $( '#container1').html();
     $('#scroll-content').append(htmlString);
});


$('#soul').click(function() {
    var htmlString = $( '#container3').html();
    $('#scroll-content').append( htmlString );
});