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

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

您可以将:not() CSS选择器与pointer-events: none; 禁用点击事件。

 li:not(.active) a{ pointer-events: none; } 

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

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

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

Answer 3

全部禁用它们并启用活动的

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

Answer 4

要使用jQuery快速禁用链接，请尝试以下操作：

 $(document).ready(function(){ $("a").click(function(event){ event.preventDefault(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <a href="https://google.com/">Go to google</a> 

Answer 5

为了获得最佳结果，您可以：

1. 将disabled类添加到li元素中
2. 取出data-toggle属性的a

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

Answer 6

您可以将以下规则添加到非活动项目中，以使其不可单击。 在以下帖子中建议这样做：

如何禁用所有div内容

.disabled, li:not(.active) {
  pointer-events: none;
  opacity: 0.4;
}

 ul { display: inline-flex; width: 100%; list-style-type: none; margin: 0; padding: 0; height: 1em; line-height: 1em; } li { width: 14%; height: 2em; margin: 0.1%; line-height: 2em; background-color: #FFF; border: thin solid #777; text-align: center; } li a { display: block; width: 100%: height: 100%; text-decoration: none; } li a, li a:active, li:visited { color: #48A; } li a:hover { color: #5AC; text-decoration: underline; } .active { background-color: #FFF; font-weight: bold; border: thin solid #DDD; } .disabled, li:not(.active) { background-color: #AAA; pointer-events: none; opacity: 0.4; } 

 <div class="navbar"> <div class="navbar-inner"> <ul class="nav nav-tabs"> <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>