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

有人能帮我将默认内容加载到某个div中，当单击某个链接时显示隐藏内容吗？而且我也希望fadeIn和fadeOut的过渡更加平滑-目前它在消失之前消失，然后再次消失

以下是脚本：

$(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>

|
|

您可以在淡出操作结束后淡入

div

标签的内容，方法如下：

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

希望它能帮助你找到解决办法（也许这不是最好的办法）

• 默认内容直接写入HTML代码中
• 我用一些文本替换图像
• 我替换

  href

  属性值（删除

  #

  ），并将其添加到JS代码中

---

希望有帮助。

除了通过使用回调函数为fadeIn/fadeOut问题提供的解决方案外，其他问题到底是什么？代码看起来很好，因为每个链接都有“.o-links”类。是这样吗？Josh另一个问题是我希望“.reserved area”div加载一些默认内容。目前没有显示任何内容，除非我点击一个点击。你能帮我做这个吗。我不知道为什么上面的代码不起作用。这似乎是有道理的。你能提供HTML，也许还有一个JSFIDLE吗？好的，我会提供HTML。请稍候。。。html现在就在那里。希望能有帮助。你知道问题是什么吗？每当我添加这一行时，在脚本中：

$（'.reserved area'）.load（$（'.menu_top a:first child'）.attr（'href'））