笔记大全

bootstrap 如何关闭tab

更新时间：2023-12-17

关闭bootstrap Tab

一、通过JS方式关闭Tab

通过设置选项卡的active值为false实现。

<script>
	$(function(){
		$("#tab1").click(function(){
			$("#tab2").removeClass("active");
			$("#pane2").removeClass("active");
			$("#tab1").addClass("active");
			$("#pane1").addClass("active");
		});
		$("#tab2").click(function(){
			$("#tab1").removeClass("active");
			$("#pane1").removeClass("active");
			$("#tab2").addClass("active");
			$("#pane2").addClass("active");
		});
	});
</script>

在点击某个选项卡时，先移除其他选项卡和内容区的active类，并在被点击选项卡和内容区中添加active类即可实现选项卡的切换。

二、通过data-toggle方式关闭Tab

通过在选项卡组件上设置data-toggle="tab"属性实现选项卡组件的关闭。

<ul class="nav nav-tabs">
	<li class="nav-item">
		<a class="nav-link active" href="#pane1" data-toggle="tab">选项卡1</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#pane2" data-toggle="tab">选项卡2</a>
	</li>
</ul>

<div class="tab-content">
	<div id="pane1" class="tab-pane active">
		选项卡1
	</div>
	<div id="pane2" class="tab-pane">
		选项卡2
	</div>
</div>

在选项卡组件上设置data-toggle="tab"属性后，点击选项卡组件即表示关闭该选项卡，不需要编写JS代码也可以实现。

三、通过a标签的data-dismiss属性关闭Tab

通过在选项卡组件上的关闭按钮上设置data-dismiss="tab"属性实现选项卡组件的关闭。

<ul class="nav nav-tabs">
	<li class="nav-item">
		<a class="nav-link active" href="#pane1" data-toggle="tab">选项卡1</a>
		<a class="nav-link" data-toggle="tab" data-target="#pane2" data-dismiss="tab">×</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#pane2" data-toggle="tab">选项卡2</a>
		<a class="nav-link" data-toggle="tab" data-target="#pane2" data-dismiss="tab">×</a>
	</li>
</ul>

<div class="tab-content">
	<div id="pane1" class="tab-pane active">
		选项卡1
	</div>
	<div id="pane2" class="tab-pane">
		选项卡2
	</div>
</div>

在选项卡组件上添加关闭按钮，为该按钮设置data-dismiss="tab"属性，即可实现选项卡组件的关闭。

四、通过自定义事件关闭Tab

通过自定义事件来关闭选项卡组件。例如在选项卡组件上添加一个关闭按钮，点击按钮时触发自定义事件来关闭选项卡组件。

<ul class="nav nav-tabs">
	<li class="nav-item">
		<a class="nav-link active" href="#pane1" data-toggle="tab">选项卡1</a>
		<a class="nav-link close-tab-btn" href="#pane1">×</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#pane2" data-toggle="tab">选项卡2</a>
		<a class="nav-link close-tab-btn" href="#pane2">×</a>
	</li>
</ul>

<div class="tab-content">
	<div id="pane1" class="tab-pane active">
		选项卡1
	</div>
	<div id="pane2" class="tab-pane">
		选项卡2
	</div>
</div>

<script>
	$(".close-tab-btn").click(function(){
		var target = $(this).attr("href");
		$(target).removeClass("active");
		$(this).parent().removeClass("active");
	});
</script>

在选项卡组件上添加一个关闭按钮，为该按钮绑定click事件，当按钮被点击时，获取目标选项卡组件的id，移除该选项卡组件和对应的导航标签上的active类，从而实现选项卡组件的关闭。

总结：在bootstrap中可以通过JS编写代码、data-toggle、data-dismiss属性、自定义事件等多种方式来关闭选项卡组件。其中，使用JS方式编写代码可以自定义选项卡的切换效果，但需要手动编写代码。而使用data-toggle属性和data-dismiss属性可以在不编写JS代码的情况下实现选项卡的关闭。自定义事件则可以在需要自定义选项卡关闭逻辑时使用。根据实际需求选择合适的方式来关闭选项卡组件，从而提高开发效率。

c语言编程笔录