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

【问题标题】：How to load default visible content for click on display script如何加载默认可见内容以单击显示脚本
【发布时间】：2013-12-27 19:53:00
【问题描述】：

有人可以帮我将默认内容加载到某个 div 中，该 div 在单击某个链接时显示隐藏内容吗？而且我还希望fadeIn 和fadeOut 过渡更平滑 - 目前它在fadeOuts 之前fadeIns 然后再次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>

【问题讨论】：

除了只使用回调函数为fadeIn/fadeOut问题提供的解决方案之外，其他问题究竟是什么？鉴于每个链接都有“.o-links”类，代码看起来不错。是这样吗？
Josh 另一个问题是我希望“.reserved-area” div 加载一些默认内容。目前没有任何显示，除非我点击一下。你能帮我解决这个问题吗？我不知道为什么上面的代码不起作用。这似乎是有道理的。
能否请您提供 HTML，或者 jsfiddle？
好的，我会提供 html。请稍候... html 现在就在那里。希望对您有所帮助。
知道问题所在吗？每当我添加这一行时，在脚本中：$('.reserved-area').load($('.menu_top a:first-child').attr('href')); 整个事情都发生了故障。

标签： javascript jquery dynamic

【解决方案1】：

你可以在fadeOut操作结束后淡入div标签的内容：

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

希望对你有帮助

【讨论】：

你能帮我解决其他问题吗？我想将一些默认内容加载到我在描述中指定的 div 中。

【解决方案2】：

您会找到here 的解决方案（可能不是最好的方法）。

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

希望对你有帮助。

【讨论】：

我一直在玩这个，但由于某种原因它不会像 jsfiddle 那样工作。非常感谢帮助我，但它只是无法正常工作。
感谢它现在正在工作。我忘记将加载内容的 div 隐藏在 css 中。谢谢一百万。
嘿，有没有办法为我的问题选择两个答案？很抱歉，我只能选择一个答案。太烂了
你好，你能告诉我你在学习jquery和javascript时读过的书吗？请！
真的吗？！我会想象你读一本书什么的。好的，再次感谢。会试一试，虽然我有点特殊，但希望学习方法对我有用。大声笑！