Question

我正在使用jQuery Tools在选项卡（嵌套选项卡）中创建一系列选项卡。你可以在这里看到效果的演示（第二个演示）：http://flowplayer.org/tools/demos/tabs/multiple-tabs.htm

我试图只在您加载页面时显示第一个系列标签，然后单击一个标签，它会正常加载。

目前，我正在使用jquery来实现这种效果，但它不是理想的。这是我的代码：

//set the 2nd row of tabs to be invisible (display none doesnt work)
$(".pane:first").css("opacity","0");

//remove the class current, so the first tab doesnt show it's current css state
$("ul.tabs li a.current").removeClass("current");

//when any tab is clicked
$("ul.tabs a").click(function(){

    //animate the 2nd row of tabs back to full opacity
    $(".pane:first").animate({
              "opacity":"1"
        }, 1000);
    });

问题一：我希望这只能在第一次ul.tabs a被点击时工作。不透明度为1后，每次单击ul.tabs a时都不需要运行此脚本

问题二：因为我只是将不透明度设置为0，所以元素仍然会加载到DOM中并占用空间。我不能使用display：none，因为tab js脚本会忽略它。

这有效......但我知道这不是解决这个问题的最好方法。关于如何优化此代码的任何想法，或完全不同的方式？

谢谢！

Answer 1

使用.one将解决您的第一个问题。 jQuery UI确实有一个非常容易使用的Tabs功能，适用于嵌套选项卡。它可能会修复问题2（允许您设置display：none）。

$("#foo").one("click", function() {
  alert("This will be displayed only once.");
});

ETA：只是为了让这更容易

$("ul.tabs a").one("click", function(){

    //animate the 2nd row of tabs back to full opacity
    $(".pane:first").animate({
              "opacity":"1"
        }, 1000);
    });

Jquery隐藏子选项卡并在第一次单击时显示

1 个答案: