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

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

jquery css

如何使用CSS和jQuery创建简单的选项卡？,jquery,css,Jquery,Css,我想创建一些简单的选项卡我有3个不同内容的div，通过在后两个div上设置一个负上边距，我将它们放置在彼此的顶部然后我有3个选项卡，我设置了我的代码，这样当你点击tab1.fadeincontent1时例如： $(document).ready(function() { $(".content-kidsclub").hide(); $("#tab1").click(function() { $(".content-kidsclub").fadeTo("slow", 1.0)

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

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

然后我有3个选项卡，我设置了我的代码，这样当你点击tab1.fadeincontent1时

例如：

$(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之类的东西有关吗

为什么不使用jqueryui和tabs功能

超级容易设置和启动。

为什么不使用JQuery UI和tabs功能

非常容易设置和启动。

看起来您正在显示选项卡，但再也不会隐藏它们了

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

看起来你在显示标签，但再也不隐藏它们了

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

你很接近-

请注意，您不必重复文档。就绪部分-声明一次即可

当然，您可以使用Bootstrap和jQueryUI，但它们非常繁重，对于此类小型任务，包含130Kb库并不是最佳做法

$(document).ready(function(){
    $("li").click(function() {
        $("li div").hide();
        $(this).children("div").fadeIn("slow");
    });
});

你很接近-

请注意，您不必重复文档。就绪部分-声明一次即可

当然，您可以使用Bootstrap和jQueryUI，但它们非常繁重，对于此类小型任务，包含130Kb库并不是最佳做法

$(document).ready(function(){
    $("li").click(function() {
        $("li div").hide();
        $(this).children("div").fadeIn("slow");
    });
});

我终于明白了，为我的帮助干杯这是我想要的

$document.readyfunction{ $tab1.clickfunction{ $.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.clickfunction{ $.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.clickfunction{ $.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。然后用动画将其淡入淡出。干杯，谢谢你解释，我只要把文件准备好就行了。

我终于明白了，干杯，谢谢你，这正是我想要的

只是一个简单的CSS更改，从display:none更改为display:block。然后用动画将其淡入淡出。感谢您解释我只需在方便的情况下准备好文档。

我在项目中使用以下代码：

它简单、轻量级，因为它使用纯JQuery而不使用jqueryui，并且可以在我测试过的所有浏览器中工作。希望可以帮助您。

我在项目中使用此代码：

它简单、轻量级，因为它使用纯JQuery而不使用jqueryui，并且可以在我测试过的所有浏览器中工作。希望可以帮助您。

如果您有问题，我可以提供更详细的帮助。如果您有问题，我可以提供更详细的帮助。您只需要一个$document.ready函数。您可以在一个ready函数中完成所有选项卡内容。您只需要一个$document.ready函数。您可以在一个现成的函数中完成所有选项卡的工作。对不起，您可以说得更具体一些。我还需要-边距吗？li是关于什么的？这是我该怎么改变我的东西？我已经按照链接所说的方式做了标签

但问题是，它们在实时视图中的外观与在浏览器中的预览中的外观不同，这使得设计页面的外观非常困难。$这指的是当前单击的元素。你不需要我的CSS——你可以根据你的设计来改变它。我不认为jQuery UI很重，尤其是当你可以定制它时，你可以根据需要缩小它。此外，如果您使用的是谷歌CDN，用户可能会将其缓存。我相信这可能已经超出了OP的范围，这似乎是一个可行的解决方案。对不起，你能更具体一点吗。我还需要-页边距吗？li是关于什么的？这是我该如何更改我的内容？我已经按照链接所说的方式完成了选项卡，但问题是它们在实时视图中的外观与在浏览器预览中的外观不同，这使得设计页面的外观非常困难。$这指的是当前单击的元素。你不需要我的CSS——你可以根据你的设计来改变它。我不认为jQuery UI很重，尤其是当你可以定制它时，你可以根据需要缩小它。此外，如果您使用的是谷歌CDN，用户可能会将其缓存。我相信这可能已经超出了OP的范围，这似乎是一个可行的解决方案。