如何使用 jQuery 实现类似 GMail 的选项卡式/装饰界面？答案

【问题标题】：How do I achieve the GMail-like tabbed/decked interface with jQuery?如何使用 jQuery 实现类似 GMail 的选项卡式/装饰界面？
【发布时间】：2011-09-01 19:16:57
【问题描述】：

我正在尝试使用 jQuery 创建一个类似于下面显示的右侧的界面——带有页眉（主题）和页脚的选项卡式/装饰式消息。

有没有人用 jQuery 做过类似的事情，或者可以提出解决问题的方向？我在网上搜索了一段时间，但没有找到足够接近的解决方案。我遇到了“30 jQuery tabs tutorial”，但也没有找到我要找的东西。

提前感谢您的帮助。让我知道是否可以提供有关我正在寻找的内容的更多详细信息。

【问题讨论】：

这不是手风琴吗？
手风琴只显示一个部分。

标签： javascript jquery html css gmail

【解决方案1】：

基本的丑陋想法：

<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    jQuery(document).ready(function(){
    $('.thread .head').click(function() {
    $(this).next().slideToggle("fast");
    return false;
    }).next().hide();
    }); 
</script
<meta charset=utf-8 />
<title>basic Idea</title>

<style>
  .thread { width: 300px; border: 1px soildl; }
  .thread h2{ background-color: #CCC; margin: 0; border: 1px solid #FFC;}
  .thread div{ background-color:#FDF; border: 1px solid #000;}
</style>
</head>
<body>
  <div class="thread">
    <h2 class="head">The information here</h2>
    <div>
       blah blah blah blah
    </div>
    <h2 class="head">come other information here</h2>
    <div>
       blah blah blah blah Goo Goo Goo
    </div>
    <h2 class="head">hee hee hee</h2>
    <div>
       ho ho ho ho ho
    </div>    
  </div>
</body>
</html>

JSBIN

【讨论】：

【解决方案2】：

您正在寻找制作手风琴。

我强烈推荐 jQuery 工具 - http://flowplayer.org/tools/demos/tabs/accordion.html

【讨论】：