<div class="page-tabs-content" style="margin-left: 0px;"> <a class="menuTab" href="javascript:;" data-id="?M=System&C=Welcome&A=home">数据统计</a><a href="javascript:;" class="menuTab" data-id="?M=System&C=Softs&A=search&cate_id=2">手机应用 <i class="ft ftsucai-close-1"></i></a><a href="javascript:;" class="active menuTab" data-id="?M=System&C=Softs&A=search&cate_id=3">手机游戏 <i class="ft ftsucai-close-1"></i></a></div>如何控制关闭除当前之外的TAB
时间: 2023-10-07 20:06:53 浏览: 52
可以使用以下代码来控制关闭除当前之外的TAB:
```
$('.page-tabs-content').on('click', '.menuTab', function () {
var id = $(this).data('id');
$('.menuTab').removeClass('active');
$(this).addClass('active');
$('.mainContent .iframe').each(function () {
if ($(this).data('id') != id) {
$(this).remove();
}
});
});
```
这段代码会在点击TAB时,先获取对应的数据id,然后将所有TAB的active类移除,并将当前TAB添加active类以显示为当前选中TAB。接着,通过遍历所有iframe,将data-id属性不等于当前id的iframe删除。这样就控制了关闭除当前之外的TAB。
相关问题
<div id="tabs" class="easyui-tabs tabs-container easyui-fluid" data-options="fit:true,border:false" style="height: 100%; width: 2680px;"> <div class="tabs-header tabs-header-noborder" style="width: 2680px; display: none;"> <!-- tabs-header内容 --> </div> <div class="tabs-panels tabs-panels-noborder" style="height: 100%; width: 2680px;"> <div class="panel" style="display: block; width: 2680px;"> <div title="" style="overflow: hidden; border: none; width: 2680px; height: 100%;" data-options="type:'PageSign'" class="panel-body panel-body-noheader panel-body-noborder"> <iframe id="mainFrame" onload="hideLoading();" frameborder="no" scrolling="auto" style="border: none; overflow-x: hidden; overflow-y: hidden; margin: 0px;height: 100%;width: inherit;" src="/aqzl_project_war_exploded/platform/main/desktop.haze?systemId=1678873404683"></iframe> </div> </div> </div> </div> 改成这样后,最底部还是有个横向的空白区域
如果在修改后仍然存在最底部的横向空白区域,那可能是由于某个元素的宽度设置过大,超出了父容器的宽度所导致的。你可以检查父级容器和子元素的宽度设置,确保它们不会超出父容器的宽度。
另外,你可以尝试为父级容器和子元素添加`box-sizing: border-box;`样式属性,这样可以避免宽度被内边距和边框影响。
以下是修改后的示例代码:
```html
<div id="tabs" class="easyui-tabs tabs-container easyui-fluid" data-options="fit:true,border:false" style="height: 100%; width: 2680px; box-sizing: border-box;">
<div class="tabs-header tabs-header-noborder" style="width: 100%; display: none; box-sizing: border-box;">
<!-- tabs-header内容 -->
</div>
<div class="tabs-panels tabs-panels-noborder" style="height: 100%; width: 100%; box-sizing: border-box;">
<div class="panel" style="display: block; width: 100%; box-sizing: border-box;">
<div title="" style="overflow: hidden; border: none; width: 100%; height: 100%; box-sizing: border-box;" data-options="type:'PageSign'" class="panel-body panel-body-noheader panel-body-noborder">
<iframe id="mainFrame" onload="hideLoading();" frameborder="no" scrolling="auto" style="border: none; overflow-x: hidden; overflow-y: hidden; margin: 0px; height: 100%; width: 100%; box-sizing: border-box;" src="/aqzl_project_war_exploded/platform/main/desktop.haze?systemId=1678873404683"></iframe>
</div>
</div>
</div>
</div>
```
通过将父级容器和子元素的宽度设置为`100%`,并添加了`box-sizing: border-box;`样式属性,可以确保它们不会超出父容器的宽度,并且不会被内边距和边框影响。
请注意,还可以根据需要调整其他样式属性来适应你的布局需求。如果问题仍然存在,请提供更多相关代码和详细描述,以便我更好地帮助你解决问题。
<nav class=“nav nav-tabs justified-content-end my-1”>
这是一个 HTML 标签 nav 的示例,其中包含了多个 CSS 类。nav 表示导航栏,nav-tabs 是 Bootstrap CSS 类,表示用选项卡的形式展示导航栏。justified-content-end 是 Bootstrap CSS 中用于居右对齐导航选项的类。my-1 表示在顶部和底部添加了 0.25rem 的外边距,以增加导航栏的垂直间距。