Question

有人可以帮我将默认内容加载到某个div中，当点击某个链接时会显示隐藏的内容吗？而且我希望fadeIn和fadeOut过渡更平滑 - 目前它在fadeOns fadeOns然后FadeIn之前就会消失。

这是剧本：

$(document).ready(function() {

//loads default content
$('.reserved-area').load($('.menu_top a:first-child').attr('href'));

$('.o-links').click(function() {

  // href has to be the id of the hidden content element
  var href = $(this).attr('href');
  $('.reserved-area')
      .fadeOut(1000)
      .html($(href).html())
      .fadeIn(1000);

  return false;
});

});

这是html：

<div class="menu_top">
  <a href="#reserved-area" class="o-links">Content1</a> |
  <a href="#reserved-area2" class="o-links">Content2</a> |
  <a href="#reserved-area3" class="o-links">Content3</a>
</div>

<div class="reserved-area">
</div>

<div id="reserved-area">
  <img src="test-img-1.jpg" class="reserved-img">
</div>

<div id="reserved-area2">
  <img src="test-img-1.jpg" class="reserved-img">
</div>

<div id="reserved-area3">
  <img src="test-img-2.jpg" class="reserved-img">
</div>

Answer 1

通过执行此操作，您可以在fadeOut操作结束后淡化div标记的内容：

  ......
  $('.reserved-area')
  .fadeOut(1000, function () {
       $(this).html($(href).html()).fadeIn(1000);
  });
  .....

希望有所帮助

Answer 2

你会发现here是一个解决方案（可能不是最佳方式）。

默认内容直接写在HTML代码中。
我用一些文字替换图像。
我替换了href属性值（我删除了#），并将其添加到JS代码中。

希望它有所帮助。

如何加载默认可见内容以单击显示脚本

2 个答案: