jquery - 使用 jQuery 在页面上切换 DIV

Question

我的页面顶部有一排链接，它们充当选项卡，单击其中一个链接时，我希望显示其 DIV，其余部分隐藏。我真的不确定解决这个问题的最佳方法。

我最初想到的是:

$("#overall").click(function(){
    if ($("#overall").is(":hidden"))
    {
        $("#hourly-div").hide("fast");
        $("#daily-div").hide("fast");
        $("#monthly-div").hide("fast");
        $("#overall-div").show("fast");
    }
});

但我发现这根本不起作用。我应该检查 DIV 的 CSS 是否为 display:hidden; 吗？

在下面标记。

    <ul class="stats">
        <li><a href="#" id="overall">Overall stats</a></li>
        <li class="sep">|</li>
        <li><a href="#" id="hourly">Hourly Bandwidth</a></li>
        <li class="sep">|</li>
        <li><a href="#" id="daily">Daily Bandwidth</a></li>
        <li class="sep">|</li>
        <li><a href="#" id="monthly">Monthly Bandwidth</a></li>
    </ul>
    <div id="overall-div">
        overall
    </div>
    <div id="hourly-div" style="display: none;">
        hourly
    </div>
    <div id="daily-div" style="display: none;">
        daily
    </div>
    <div id="monthly-div" style="display: none;">
        monthly
    </div>

我希望 overall div 在用户加载页面时显示，而其余部分则隐藏，直到用户单击它们的选项卡。

谢谢。 :)

Answer 1

最好的方法是使用 jQuery UI和 tabs插入。如果您必须自己实现选项卡式界面，至少请查看他们的代码以了解如何实现它。请注意，您不必下载整个 UI 代码即可仅使用选项卡。您可以通过将下载限制为仅您需要的组件来缩小下载量。

<div class="tabs">
    <ul class="stats">
            <li><a href="#overall-div" id="overall">Overall stats</a></li>
            <li><a href="#hourly-div" id="hourly">Hourly Bandwidth</a></li>
            <li><a href="#daily-div" id="daily">Daily Bandwidth</a></li>
            <li><a href="#monthly-div" id="monthly">Monthly Bandwidth</a></li>
    </ul>
    <div id="overall-div">
            overall
    </div>
    <div id="hourly-div">
            hourly
    </div>
    <div id="daily-div">
            daily
    </div>
    <div id="monthly-div">
            monthly
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $('.tabs').tabs();  // that's it unless you want to customize
    });
</script>

一个额外的好处是，如果用户禁用了 javascript，它就可以正常工作。