javascript - 如何禁用 Bootstrap 选项卡

Question

我有这个导航标签

<ul class="nav nav-tabs" id="pointerTabs">
    <li class="active aa"><a data-toggle="tab" href="#aa">01 Personal</a></li>
    <li class="bb" ><a data-toggle="tab" href="#bb">02 Education</a></li>
    <li class="cc"><a data-toggle="tab" href="#cc" >03 Experience</a></li>
    <li class="dd"><a data-toggle="tab" href="#dd">04 Family</a></li>
</ul>

在页面加载时，我尝试禁用除第一个选项卡之外的所有选项卡。因此尝试添加属性

$('.bb,.cc,.dd').prop('disabled','true');

但它不起作用。

如何禁用它？有什么帮助吗？如何使用data-toggle在此处启用和禁用选项卡？

Answer 1

除了第一个li之外，您可以使用pointer-events:none

.nav.nav-tabs li:not(:first-of-type) a {
  pointer-events:none;
}