jquery动态关闭左边的tab标签

本文介绍了一种使用 JavaScript 实现可折叠 Tab 控件的方法,重点讲解如何通过计数隐藏的 Tab 来判断是否需要关闭整个左侧栏。此外,还探讨了如何为 Tab 控件添加关闭按钮,并提供了具体的代码实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先在工具栏写上自己要使用的工具,然后把js事件写好,点击哪个展开哪个tab,这里要说的重点的是展开的tab里的小小的关闭按钮的事件怎么写,之前老是通过找父类或者找兄弟,现在并不说这样做不对,我说的是另外的一种思路,我是给左边的tab展开给了一个相同的class样式i,所以就用一下代码做的:

 var hiddenNum=0;

$(".leftTool").each(function(i,o){
if($(this).css("display")=="block"){
hiddenNum=$(this).parent(".cont").find(".leftTool:hidden").length;
var litab=$(this).attr("id");
var conttab=$(this).attr("tolo");
 
$(".picLab").hide();
$("#"+litab).children(".picLab").show();
$("#"+litab).addClass("addbj").siblings().removeClass("addbj");
$(conttab).show().siblings().hide();
}
if($(this).css("display")=="block"){
var valueId=$(e.target).attr('value');
var tab=$("#"+valueId).attr("tolo");
$("#"+valueId).css("display", "none");
$(tab).css("display", "none");
}
});

当hiddenNum等于左边所有的tab长度时,就可以关闭左边展开的div了,类似这样

 if(hiddenNum==($("#cont").children().length)-1){
$("#leftCont").hide();
$("#toolHead").css("margin-left","0px");
$("#toolHead").css("width",$(window).width());
$("#leftCont").hide();
$(".flexDiv").css("margin-left","0px");}

这里自己想说的是自己是通过找被隐藏的tab个数是多少,然后去判断这个时候是不是要关闭左边展开的DOM

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值