如何将jquery选项卡分解为整个页面

Question

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

+-------------------------------------------+
|                                           |
| +----------------------------+ +--------+ |
| |main                        | |sidebar | |
| |                            | |+------+| |
| |                            | ||jquery|| |
| |                            | || tabs || |
| |                            | |+------+| |
| |                            | |        | |
| |                            | |        | |
| +----------------------------+ +--------+ |
+-------------------------------------------+

其中a有jQuery标签元素，带有4个标签。我想有一个按钮，可以在整个页面上同时显示所有4个标签，并有一个关闭选项，可以像之前一样恢复。像这样：

+-------------------------------------------+
|                                           |
| +------------------+ +------------------+ |
| | tab 1            | | tab 2            | |
| |                  | |                  | |
| +------------------+ +------------------+ |
|                                           |
| +------------------+ +------------------+ |
| | tab 3            | | tab 4            | |
| |                  | |                  | |
| +------------------+ +------------------+ |
|                                     close |
+-------------------------------------------+

关于如何做到这一点的任何想法？

Answer 1

我最近做了类似的事。假设你的标签是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执行的操作，并按下Close按钮调用它。如果您发现collapse需要在调用expand之前了解事务状态（比如哪个标签处于活动状态），请让expand使用jQuery.data()方法存储此信息供collapse稍后检索。

注意：如果您愿意，可以只应用/覆盖特定样式，而不是删除'tab'类并添加'expandedtab'类，使expand将样式属性添加到选项卡DIV并具有collapse删除该属性。