1

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

我有 3 个具有不同内容的 s，我通过在后两个sdiv上设置一个负上边距来将它们放置在彼此之上。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 很陌生，所以这似乎有点愚蠢。

总的来说，有没有人知道一种更好的方法来将divs 放置在彼此之上，然后让标签工作。是否与使用display:block有关。

4

5 回答 5

5

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

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

超级容易设置和开始。

于 2012-06-12T17:41:19.083 回答
3

你非常接近 - http://jsfiddle.net/7mfLF/1/

请注意，您不必重复该document.ready部分 - 声明一次即可。

当然你可以使用 Bootstrap 和 jQuery UI，但是它们真的很重，对于这些小任务，包含一个 130Kb 的库并不是最好的做法。

$(document).ready(function(){
    $("li").click(function() {
        $("li div").hide();
        $(this).children("div").fadeIn("slow");
    });
});
于 2012-06-12T17:53:42.110 回答
1

看起来您正在显示您的标签，但再也没有隐藏它们？

有没有想过使用 twitter 引导程序？可能会简化事情...

http://twitter.github.com/bootstrap/javascript.html#tabs

于 2012-06-12T17:44:28.273 回答
0

我在我的项目中使用此代码：

带有 CSS 和 jQuery 的简单标签

它简单、轻量，因为使用纯 JQuery（没有 JQuery UI）并且可以在我测试过的所有浏览器中工作。希望能帮到你。

于 2012-06-13T20:06:59.773 回答
0

我终于明白了，为帮助这就是我想要的而欢呼。

$(document).ready(function(){ 
    $("#tab1").click(function(){
        $(".content-computersuite").css({display: "none"}).animate({opacity: "0"});
        $(".content-education-assistance").css({display: "none"}).animate({opacity: "0"});                    
        $(".content-kidsclub").css({display: "block"}).animate({opacity: "1"},1000);    
    });

    $("#tab2").click(function(){
        $(".content-kidsclub").css({display: "none"}).animate({opacity: "0"});  
        $(".content-education-assistance").css({display: "none"}).animate({opacity: "0"});
        $(".content-computersuite").css({display: "block"}).animate({opacity: "1"},1000);   
    });

    $("#tab3").click(function(){
        $(".content-kidsclub").css({display: "none"}).animate({opacity: "0"});  
        $(".content-computersuite").css({display: "none"}).animate({opacity: "0"});
        $(".content-education-assistance").css({display: "block"}).animate({opacity: "1"},1000);    
    });
});

只需一个简单的 CSS 从 display:none 更改为 display:block。然后动画淡化它。欢呼解释我只需要在方便时准备好文件。

于 2012-06-13T15:09:28.973 回答