JQuery选项卡动态内容与点击淡出+淡入和幻灯片没有UI答案

【问题标题】：JQuery tabs dynamic content with on click fadeout+fadein and slide without UIJQuery选项卡动态内容与点击淡出+淡入和幻灯片没有UI
【发布时间】：2012-05-29 12:43:24
【问题描述】：

我绝对是 JQuery 的初学者（但我对 JS 和其他语言的编程有所了解）
我有两个目标：

非常简单的选项卡（或任何控件），单击时旧（活动）选项卡内容淡出，然后单击的选项卡内容淡入（同一位置）
与 1 相同，但内容是水平滑动而不是淡出。我不想要 JQuery UI，因为这对于这种简单的东西来说太过分了，我想学习。

目标 1，JS：

$(function () {
$("div.tabs > div:gt(0)").hide();
$("div.tabs ul a:first").addClass('selected');

$('div.tabs ul a').click(function () {
$("div.tabs > div").fadeOut('normal', function () {
$("div.tabs > div").fadeIn('slow');
});
$('div.tabs ul a').removeClass('selected');
$(this).addClass('selected');
   return false;
});
});

HTML：

<div class="tabs">
    <ul>
        <li><a href="#first">First</a></li>
        <li><a href="#second">Second</a></li>
        <li><a href="#third">Third</a></li>
    </ul>
    <div id="first">
        <h2>First content</h2>
    </div>
    <div id="second">
        <h2>Second content</h2>
    </div>
    <div id="third">
        <h2>Third content</h2>
    </div>
</div>

如何找到活动的 div，而不是在 fadeOut 和 fadeIn 行中用 $("div.tabs > div") 戳所有 div？

目标2：
我读到了slideUp 和slideDown 但这是垂直的，也许我必须使用animate()？
如何？如果它太复杂而不是垂直滑动对我有好处......

【问题讨论】：

标签： javascript jquery tabs sliding fading

【解决方案1】：

目标 1：只需在当前内容 div 中添加一个活动类。更改代码见demo。

目标 2：有几种技术可以在不使用 jQuery UI 的情况下实现，这取决于您想要实现的目标以及您想要在哪里使用它。滑动效果见altered demo。

【讨论】：

在您的解决方案中，您给了我$(this).attr('href') 的想法，我将其简化为test file，但奇怪的事情发生了......
我 updated my simplified code 并且它可以工作，所以不需要为 aim1 添加 active 类，但感谢 .attr('href') 和你的 aim2 解决方案是我想象过的最好看的： -) 谢谢。
有没有固定高度的aim2解决方案，例如。对于未定义的文本长度？
只需要高度，因为内容 div 位于 div.tabs 中。通过一些 HTML 和 CSS 更改，这也适用于动态长度。

【解决方案2】：

Paul 的回答针对目标 1 进行了简化：没有额外的类，优化为 "div" + $(this).attr('href')，淡出的解决方案是 div:visible：

$(function () {
 $("div.tabs > div:gt(0)").hide();
 $("div.tabs ul a:first").addClass('selected');

 $('div.tabs ul a').click(function () {
  var newDiv = "div" + $(this).attr('href');
  $("div.tabs > div:visible").fadeOut('normal', function () {
   $(newDiv).fadeIn('slow');
  });
  $('div.tabs ul a').removeClass('selected');
  $(this).addClass('selected');
  return false;
 });
});

谢谢保罗。

【讨论】：