javascript - 如何使非事件标签不可点击

Question

我有这些选项卡，但是否可以使其他非事件选项卡不可点击？

<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>

Answer 1

为了获得最好的结果，您可以:

1. 将disabled类添加到li元素
2. 移除 a 的 data-toggle 属性

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="navbar">
   <div class="navbar-inner">
      <ul class="nav nav-tabs" style="display:inline-flex">
          <li class="active"><a href="#step0" data-toggle="tab">Step 0</a></li>
          <li><a href="#step1" data-toggle="tab">Step 1</a></li>
          <li class="disabled"><a href="#step2" >Step 2</a></li>
          <li class="disabled"><a href="#step3" >Step 3</a></li>
          <li class="disabled"><a href="#step4" >Step 4</a></li>
          </ul>
      </div>
  </div>