jquery - 使用 load() 加载外部页面后如何实现 slideToggle 功能

Question

我想在使用 load() 在 DIV 中加载外部页面后实现 slideToggle 功能。这个想法是我有三个不同的选项卡，每个选项卡在单击时将从提到的 DIV 内的三个外部页面加载三个不同的内容。当我单击一个选项卡时，它将加载一个外部页面，然后如果我单击同一选项卡，它将向上滑动内容。接下来，如果我单击第二个选项卡，它将使用 load() 加载其相关内容，因此第一个打开的选项卡内容将向上滑动。请给任何建议。

Answer 1

您可以尝试以下方法。只需在相关的 a 标签中输入您要引用的网址：

HTML：

<div>
  <ul id="tabs">
      <li><a title="type1" href="http://externalurl1">tab1</a></li>
      <li><a title="type2" href="http://externalurl2">tab2</a></li>
      <li><a title="type1" href="http://externalurl3">tab3</a></li>
  </ul>
</div>
<div class="clear"></div>

<div class="content"></div>

jQuery

$('ul#tabs li a').each(function(){

    $(this).click(function(){

      $('div.area').slideUp(300);
      $('div.area').empty();
      $('div.area').load($(this).attr('href'));
      $('div.area').slideDown(300);
      return false;
    });


});

让我知道它是否有效

更新：

这是一个可行的解决方案：http ://plnkr.co/edit/DUSrZHJD9H37s6u2aRmN?p=preview