0

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

  1. 非常简单的选项卡（或任何控件），单击时旧（活动）选项卡内容淡出，然后单击选项卡内容淡入（同一位置）
  2. 与 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，而不是用$("div.tabs > div")infadeOut和 in戳所有 div fadeIn？

目标2：
我读过slideUp，slideDown但那是垂直的，也许我必须使用animate()？
如何？如果它太复杂而不是垂直幻灯片对我有好处......

4

2 回答 2

1

目标 1：只需向当前内容 div 添加一个活动类。有关更改的代码，请参见演示。

目标 2：有几种技术可以在不使用 jQuery UI 的情况下完成，这取决于您想要实现的目标以及您想要在哪里使用它。有关一些滑动效果，请参阅更改后的演示。

于 2012-05-29T13:03:20.607 回答
0

保罗的回答简化了目标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;
 });
});

谢谢保罗。

于 2012-05-29T14:21:16.170 回答