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并使用tabs功能？

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

超级易于设置和开始。

Answer 2

你非常接近 - 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");
    });
});

Answer 3

看起来你正在显示你的标签，但从不再隐藏它们？

有没有想过使用twitter bootstrap？可能会简化事情...

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

Answer 4

我终于想通了帮助这就是我想要的。

$(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);    
    });
});

只需从display：none更改一个简单的CSS更改：block。然后是一个褪色的动画。为解释我的欢呼只需要做好准备就好了。

Answer 5

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

Simple Tabs w/ CSS & jQuery

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

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

5 个答案: