时间戳

首页 > 解决方案 > 根据状态禁用导航选项卡

javascript - 根据状态禁用导航选项卡

问题描述

我有这个引导导航选项卡。

<div ng-app="myApp" ng-controller="myCtrl"> 
   <div class="breadcrumb">
       <ul class="nav nav-tabs">
          <li class="active"><a href="#submitted" data-toggle="tab">Submitted</a></li>
          <li><a href="#pendingApproval" data-toggle="tab">Pending Approval</a></li>
          <li><a href="#workInProgress" data-toggle="tab">Work In Progress</a></li>
          <li><a href="#complete" data-toggle="tab">Complete</a></li>
       </ul>
  </div>

  <div class="tab-content" style="margin:5%;">
        <div class="tab-pane active" id="submitted" ng-class="{'active':dataStatus=='submitted'}">
         Submitted data will be displayed here....
      </div>
      <div class="tab-pane" id="pendingApproval" ng-class="{'active':dataStatus=='pending'}">
        Pending Approvals will be displayed here....
      </div>
      <div class="tab-pane" id="workInProgress" ng-class="{'active':dataStatus=='inprogress'}">
         In Progress data will be displayed here....
      </div>
      <div class="tab-pane" id="complete" ng-class="{'active':dataStatus=='completed'}">
         Completed data will be displayed here....
      </div>
  </div>
</div>

在这里，我在dataStatus变量中获得了不同的状态，基于将活动类添加到选项卡。

我的查询是如果我进入pending，dataStatus标签应该在pending tab我可以访问后被禁用submitted and pending tab。我应该可以访问in progress and completed标签。

与所有状态相同。我应该只根据状态访问以前的选项卡。我该怎么做？有帮助吗？谢谢！！

小提琴：https ://jsfiddle.net/70Luf7hu/76/

标签： javascriptjqueryangularjs

解决方案

您可以使用单独的类来禁用 li 元素并根据您在 ng-class 中的要求添加条件/表达式。下面是jsfiddle链接

小提琴：https ://jsfiddle.net/anilsarkar/9xf5neyz/17/

.disabled {
pointer-events:none; 
opacity:0.6;

}

   <ul class="nav nav-tabs">
      <li class="active"><a href="#submitted" data-toggle="tab">Submitted</a></li>
      <li ng-class="{'disabled':dataStatus=='submitted'}"><a href="#pendingApproval" data-toggle="tab">Pending Approval</a></li>
      <li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending'}"><a href="#workInProgress" data-toggle="tab">Work In Progress</a></li>
      <li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending' || dataStatus=='inprogress'}"><a href="#complete" data-toggle="tab">Complete</a></li>
   </ul>

注意：我添加了一个禁用类来禁用 li 元素

推荐阅读