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，那么它可以正常运行。

Answer 2

类似的东西：

$('ul.stats a').click(function(e) {
    $('#' + this.id + '-div').show().siblings('[id$=-div]').hide();
    e.preventDefault();
});

Answer 3

以下是我的完成方式，将其添加到点击事件中：

if(jQuery){
  jQuery('.tab').removeClass('show');
  jQuery('#skills').addClass('show');
  return false;
};

和css：

div.tab {display:none;}
div.show {display:block;}

使用jQuery在页面上切换DIV

3 个答案: