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

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

jquery-ui-tabs jquery-ui jquery javascript

Ricardo Marimon · 技术社区 · 14 年前

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

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

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

你知道怎么做吗?

1 回复 | 直到 14 年前

Rune 14 年前

我最近也做了类似的事情。假设您的选项卡是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”类 扩大 删除属性。

推荐文章

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

6 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

6 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

6 年前

Paili · 如何在jQuery自动完成中添加其他内容?

6 年前

monu · 动态嵌套选项卡创建

6 年前

Tirkesh Turkesh · 可拖动行在jquery中不工作?

6 年前

Joe · WordPress-如何按字母顺序排列jQuery自动完成搜索建议结果,优先排序第一个字符,然后再排序第二个字符等。?

6 年前

Triwahyu Pamungkas Pribadi · 如何在可拖动停止时获取目标/类名

6 年前

pcCC28 · 如何基于jwt令牌身份验证保持用户登录。

6 年前

buggy1985 · 具有多个元素的jQuery UI Sortable抛出“TypeError:无法读取null的属性‘insertBefore’”

6 年前