bootstrap nav-tabs添加关闭按钮,并实现点击关闭按钮实现tabs和页面的清...

发布网友 发布时间：2022-05-05 17:18

我来回答

共2个回答

热心网友 时间：2022-04-21 05:34

先给出示例html代码
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="contentnavid">
<li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">tab1</a></li>
<li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">tab2</a></li>
<li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">tab3</a></li>
<li role="presentation" id="closetabli"><a href="#closetab" aria-controls="closetab" role="tab" data-toggle="tab"><span>closetab</span>
<button type="button" class="close" aria-label="Close" id="closetabbtn"><span aria-hidden="true" style="color:red">×</span></button>
</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">this is tab1</div>
<div role="tabpanel" class="tab-pane active" id="tab2">this is tab2</div>
<div role="tabpanel" class="tab-pane active" id="tab3">this is tab3</div>
<div role="tabpanel" class="tab-pane active" id="closetab">this is closetab</div>
</div>
</div>

上面的html代码中，显示的导航组件有4个tab页，其中最后一个tab页的标签的右边有一个 x 的关闭按钮。

下面我们要实现就是当点击x关闭按钮时，可以把这个带关闭按钮的tab隐藏掉，并显示最近一次显示的tab页。追问我要的是实现的js。。。不是这种demo

热心网友 时间：2022-04-21 06:52

我做了一个开源的bootstrap multitabs，请看http://git.oschina.net/edwinhuish/multi-tabs。

实现了几乎零配置，达到你的效果。

在不关闭浏览器的情况下，直接刷新页面能保留所有标签页。
导航标签tab可移动
当标签数量设置为 1 的时候，隐藏便签列表