Question

单击按钮时，我尝试将一个div内容更改为另一个div内容，反之亦然。我还想在内容区域中为单独的div添加一些动画。我希望它能在两个div之间切换。用于intance，按btn1时显示section1的产品，按btn2时显示section2的产品。

HTML

<button id="btn1" type="button" class="btn">btn1</button>
<button id="btn2" type="button" class="btn">btn2</button>

<div id="section1"> 
<!-- content goes here -->
</div>
<div id="section2">
<!-- content goes here -->
</div>

JQUERY

  $(document).ready(function() {
  var section1 = $('#section1')
  var section2 = $('#section2')

  $('#btn1').click(function() {
    $('#section1').html($('#section2').html());
  });

  $('#btn2').click(function() {
    $('#section2').html($('#section1').html());
  });
});

任何帮助将不胜感激!! ：）

Answer 1

您最好使用show()和hide()：

$('#btn1').click(function() {
   $('#section1').show();
   $('#section2').hide();
});

$('#btn2').click(function() {
   $('#section2').show();
   $('#section1').hide();
});

比搞乱HTML更容易。此外，当你获得更高级的时候，你可以尝试各种效果，比如褪色。 Here是各种jQuery效果的演示，可用于显示和隐藏（还有其他效果，不涉及显示和隐藏）。（此演示也需要安装jQuery-UI。）

Answer 2

看起来像替换乐趣lol

＆＃13;

$(document).ready(function() {
  $('button#btn1').bind('click', function() {
    temp = $('div#section1').text();
    $('div#section1').text($('div#section2').text());
    $('div#section2').text(temp);
  });
  $('button#btn2').bind('click', function() {
    temp = $('div#section2').text();
    $('div#section2').text($('div#section1').text());
    $('div#section1').text(temp);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p><button id="btn1" type="button" class="btn">btn1</button></p>
<p><button id="btn2" type="button" class="btn">btn2</button></p>
<p><hr></p>
<p><div id="section1">Lorem ipsum dolor sit amet.</div></p>
<p><div id="section2">Lorem consectetur adipiscing elit. Maecenas in.</div></p>

＆＃13;

JQuery .replaceWith（）或.html（）

2 个答案: