Question

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

Answer 1

您可以尝试以下操作。只需在相关的标签中输入您引用的网址：

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

使用load（）加载外部页面后如何实现slideToggle功能

1 个答案: