Angular.js单击链接并突出显示选项卡

时间:2019-03-27 20:42:51

标签: javascript angularjs

我需要点击一个链接并保持标签有效, 这段代码是正确运行的标签页,可保持标签页处于活动状态:

<ul class="nav nav-tabs" role="tablist" id="MovieContent">
    <li class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['DUB'])">                                                    
        <a class="tab nav-link" data-toggle="tab" href="#Dubled_{{mov.ID}}"
            ng-class="{active: language=='dubbed'}" ng-click="language='dubbed'"> 
            Dubbed
        </a>
    </li>
    <li class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['LEG'])">
        <a class="tab nav-link" data-toggle="tab" href="#Legended_{{mov.ID}}"
            ng-class="{active: language=='legended'}" ng-click="language='legended'">
             Legended
        </a>
    </li>
    <li class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['NAC'])">
        <a class="tab nav-link" data-toggle="tab" href="#National_{{mov.ID}}"
            ng-class="{active: language=='national'}" ng-click="language='national'">
             National
        </a>
    </li>
</ul>

这是我的尝试,并且单击的选项卡未处于活动状态,此代码仅在第一个选项卡中:

<div class="nav nav-tabs" role="tablist" id="MovieContent">
    <div class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['DUB'])">                                                    
        <a class="tab nav-link" data-toggle="tab" href="#Dubled_{{mov.ID}}"
            ng-class="{active: language=='dubbed'}" ng-click="language='dubbed'"> 
            Dubbed
        </a>
    </div>
    <div class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['LEG'])">
        <a class="tab nav-link" data-toggle="tab" href="#Legended_{{mov.ID}}"
            ng-class="{active: language=='legended'}" ng-click="language='legended'">
             Legended
        </a>
    </div>
    <div class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['NAC'])">
        <a class="tab nav-link" data-toggle="tab" href="#National_{{mov.ID}}"
            ng-class="{active: language=='national'}" ng-click="language='national'">
             National
        </a>
    </div>
</div>

0 个答案:

没有答案