jquery - 如何使用 CSS 和 jQuery 创建简单的选项卡？

Question

我想创建一些简单的选项卡。

我有 3 个具有不同内容的 div，并且通过在后两个 div 上设置负上边距，将它们放置在彼此的顶部。

然后我有 3 个选项卡，并且我已经设置了代码，以便当您单击 #tab1 .fadein content1 时。

示例:

$(document).ready(function() {
  $(".content-kidsclub").hide();
  $("#tab1").click(function() {
    $(".content-kidsclub").fadeTo("slow", 1.0);
  });
});

$(document).ready(function() {
  $(".content-computersuite").hide();
  $("#tab2").click(function() {
    $(".content-computersuite").fadeTo("slow", 1.0);
  });
});

$(document).ready(function() {
  $(".content-education-assistance").hide();
  $("#tab3").click(function() {
    $(".content-education-assistance").fadeTo("slow", 1.0);
  });
});

我第一次点击每个按钮时效果都很好。但在那之后它就停止了。另外:如果您首先单击 tab2，由于负边距，它会位于上方。不知道为什么。

我感觉如此接近，但到目前为止。我怀疑它与回调有关。

我对 jQuery 很陌生，所以我想做的事情可能看起来有点愚蠢。

总的来说，有谁知道更好的方法将 div 放置在彼此之上，然后使选项卡正常工作。这与使用 display:block 之类的东西有关吗？

Answer 1

为什么不使用 JQuery UI 并使用选项卡功能？

http://jqueryui.com/demos/tabs/

super 容易设置和使用。