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

我有3 div s有不同的内容，我已经通过在第二个div s上设置减去顶部边距来将它们放置在彼此的顶部。

然后，我有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以及所有类似的事情有关。

来源

2012-06-12 user1451848

您只需要一个$（文档）。ready（）'函数。您可以在一个准备就绪的功能中完成所有选项卡内容。 – jrummell

为什么不使用JQuery用户界面和使用标签功能？

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

超级容易设置和走了。

来源

2012-06-12 17:41:19

如果您遇到问题，我可以提供更详细的帮助。 –

它看起来像你展示你的标签，但从来没有再隐藏它们？

想过使用Twitter的引导呢？可能简化事情......

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

来源

2012-06-12 17:44:28 localhost

你是非常接近 - 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-12 17:53:42

对不起，但你可以更具体。我是否仍然需要-margin和什么是li，而这个我该怎么改变我的东西？ – user1451848

我已经完成了标签的链接方式，但问题是他们在实时视图中看起来不像在浏览器中的预览，这使得设计页面的外观真的很难 – user1451848

'$（this）'指的是当前点击元件。你不需要我的CSS - 你可以根据你的设计自由地改变它。 –

我想通了，最后欢呼，帮助这是我想要的。

$(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改变：无显示：块。那么一个动画就会淡化它。欢呼声来解释我只需要准备好文件，一旦方便。

来源

2012-06-13 15:09:28 user1451848

你可以接受你自己的答案 –

很高兴你有它的工作：} –