切换的DIV使用jQuery

在页面上我有在我的页面的顶部这意味着可以作为标签，当一个人被点击我想它的DIV显示和隐藏休息一行链接。我真的不确定最好的方式去做这件事。切换的DIV使用jQuery

我的渊源是什么想出了：

$("#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当用户加载页面，并要隐藏的休息，直到用户点击一个标签为他们展示。

谢谢。 :)

来源

2009-12-16 Matt

我不明白。如果您的用户隐藏，您将如何点击一个div？ – 2009-12-16 16:17:59

他们点击页面顶部的链接，进入功能来显示/隐藏DIV :)这就是UL在标记上的用途。 – Matt 2009-12-16 16:19:02

喜欢的东西：

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

来源

2009-12-16 16:21:09 David

嗨，这似乎是最简单的回答，但如果我用这个代码，我点击一个选项卡链接，在页面（而不仅仅是其他选项卡的div）上隐藏的一切，只能说明我点击了标签。谢谢回复。 – Matt 2009-12-16 16:28:26

是的，只是修正它，因此它的目标是一个以“-div”结尾的ID。 – David 2009-12-16 16:29:49

非常感谢。奇迹般有效。 :) – Matt 2009-12-16 16:30:58

去它的最好方法是使用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，它工作得很好。

来源

2009-12-16 16:17:32 tvanfosson

下面是我已经做到了，这添加到单击事件：

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

和css：

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

来源

2009-12-16 16:22:14

切换的DIV使用jQuery

回答

相关问题