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

之外的所有事件

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

Answer 2

你可以在你的li标签中添加这个css

类= “disabledTab”

    .disabledTab{
    pointer-events: none;
}

你在HTML中

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

在您要禁用的标签中添加disabledtab css。

Answer 3

您可以使用jQuery并删除data-toggle和href属性，并且每次都会对某些事件进行操作。

此外，如果要在页面加载时禁用除一个以外的所有内容，请向所有要禁用的内容添加一个公共类，然后使用CSS属性pointer-events 例如：

.disable
{
    pointer-events: none;
}

如何禁用引导选项卡

3 个答案: