Javascript 如何使非活动选项卡不可点击

我有这些选项卡，但是否可以使其他非活动选项卡不可读取

<div class="navbar">
   <div class="navbar-inner">
      <ul class="nav nav-tabs" style="display:inline-flex">
          <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
          <li><a href="#step2" data-toggle="tab">Step 2</a></li>
          <li><a href="#step3" data-toggle="tab">Step 3</a></li>
          <li><a href="#step4" data-toggle="tab">Step 4</a></li>
          <li><a href="#step5" data-toggle="tab">Step 5</a></li>
          <li><a href="#step6" data-toggle="tab">Step 6</a></li>
          <li><a href="#step7" data-toggle="tab">Step 7</a></li>
         </ul>
      </div>
  </div>

只需将此类添加到要禁用单击的选项卡中即可。 这是css

.avoid-clicks {
 pointer-events: none;
}

---

将它们全部禁用并启用激活的一个

$('li').prop('disabled',true);
$('.active').prop('disabled',false);

---

要使用jquery动态禁用链接，请尝试以下操作：

$（文档）.ready（函数（）{
$（“a”）。单击（函数（事件）{
event.preventDefault（）；
});
});
要获得最佳效果，您可以：

将
disabled
类添加到
li
元素中
删除
a









您可以使用
：not（）
CSS选择器来选择
指针事件：无禁用单击事件


li:not（.active）a{
指针事件：无；
}










您可以将以下规则添加到非活动项中，使其不可读取。这是在以下帖子中提出的：


。已禁用，li:未（.active）{
指针事件：无；
不透明度：0.4；
}


ul{
显示：内联flex；
宽度：100%；
列表样式类型：无；
保证金：0；
填充：0；
高度：1米；
线高：1米；
}
李{
宽度：14%；
高度：2米；
利润率：0.1%；
线高：2米；
背景色：#FFF；
边框：薄实线#777；
文本对齐：居中；
}
李阿{
显示：块；
宽度：100%：
身高：100%；
文字装饰：无；
}
李a，李a：活动，李：参观{
颜色：#48A；
}
李娜：停下来{
颜色：5AC；
文字装饰：下划线；
}
.主动{
背景色：#FFF；
字体大小：粗体；
边框：薄实线#DDD；
}
.已禁用，li:未（.active）{
背景色：#AAA；
指针事件：无；
不透明度：0.4；
}










删除
href
属性如何？如果您在代码之上使用任何框架（和版本），则必须指定为
标记
。例如，这个标记看起来像一个
bootstrap
代码，但我不知道它是v3x还是v4。这是因为许多框架已经内置了方法来完成禁用状态下的不同操作（在本例中）。