jquery动态关闭左边的tab标签

最新推荐文章于 2023-11-09 10:53:31 发布

原创最新推荐文章于 2023-11-09 10:53:31 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文介绍了一种使用 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