代码之家 › 专栏 › 技术社区 › Ricardo Marimon

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

jquery-ui-tabs jquery-ui jquery javascript

Ricardo Marimon · 技术社区 · 16 年前

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

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

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

你知道怎么做吗?

1 回复 | 直到 16 年前

Rune 16 年前

我最近也做了类似的事情。假设您的选项卡是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 让你的关闭按钮来呼叫它。如果你发现了 崩溃 扩大 被调用(比如哪个选项卡是活动的),有 扩大 使用 jQuery.data() 崩溃 .

注意:如果您愿意,可以只应用/覆盖特定样式,而不是删除“tab”类并添加“expandedtab”类 扩大 删除属性。

推荐文章

jforward5 · jquery选项卡-在选项卡内导航时保存选项卡内容

8 年前

Shrabanee · 如何使用jqueryui选项卡基于可观察earray创建选项卡

10 年前

mcoomey · 如何使用jQueryUI将可排序行附加到另一个选项卡中的表?

12 年前

Amit Singh · 如何将元素拖放到动态生成的DIV中,Drag函数运行良好

12 年前

user1357015 · UiTab中的日期选择器未显示

12 年前

srt8driver · Javascript重定向到带有jquery选项卡的页面

12 年前

Pelligea · 如何在激活和重置时交换jQuery选项卡标签?

13 年前

JoeHughes · JqueryUI谷歌地图不会调整大小,除非单击

13 年前

KO. · jQuery UI选项卡和对话框

13 年前

Dimitri Shukuroglou · jQuery UI选项卡在表达式引擎网站中不起作用

13 年前