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

Question

我想创建一些简单的标签.

我有3 div秒不同的内容,我通过在后两个divs 上设置减去上边距来将它们放在彼此的顶部.

然后我有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很新,所以这似乎有点愚蠢我想做什么.

总的来说,有没有人知道更好的方法来将divs置于彼此之上然后让标签工作.这与使用display:block和所有类似的东西有关.

Answer 1

为什么不使用JQuery UI并使用tabs功能？

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

超级易于设置和开始.