0

我有一个看起来像这样的页面：

+--------------------------------------------+
| |
| +----------------+ +--------+ |
| |主要 | |边栏 | |
| | | |+------+| |
| | | ||jquery|| |
| | | || 标签 || |
| | | |+------+| |
| | | | | |
| | | | | |
| +----------------+ +--------+ |
+--------------------------------------------+

其中有 jQuery 选项卡元素和 4 个选项卡。我希望有一个按钮可以在整个页面上同时显示所有 4 个选项卡，并带有一个关闭选项以将其恢复为以前的状态。像这样的东西：

+--------------------------------------------+
| |
| +------------------+ +------------------+ |
| | 标签 1 | | 标签 2 | |
| | | | | |
| +------------------+ +------------------+ |
| |
| +------------------+ +------------------+ |
| | 标签 3 | | 选项卡 4 | |
| | | | | |
| +------------------+ +------------------+ |
| 关闭 |
+--------------------------------------------+

关于如何去做这件事的任何想法？

4

1 回答 1

0

我最近做了类似的事情。假设您的选项卡是 DIV 元素，让按钮调用代码执行以下操作

function expand(){
  $('div.tab').each(function(){ 
    $(this).show(); //Make sure all our tabs are visible
    $(this).removeClass('tab'); //Remove any sizing etc. previously applied to the tab by your stylesheet
    $(this).addClass('expandedtab'); //Apply class which sets proper size, floats left etc.
  }); 
}

然后创建一个collapse方法来恢复执行的操作expand并让您的关闭按钮调用它。如果您发现collapse需要了解expand调用之前的事务状态（例如哪个选项卡处于活动状态），请expand使用jQuery.data()方法存储此信息以供以后检索collapse。

注意：如果您愿意，而不是删除“选项卡”类并添加“扩展选项卡”类，您可以应用/覆盖特定样式，expand将样式属性添加到选项卡 DIV 并collapse删除该属性。

于 2010-03-06T16:11:28.690 回答