javascript - 根据条件移动导航选项卡
问题描述
如果满足条件,我需要将导航选项卡移动到订阅选项卡。我一无所知。非常感谢您的任何帮助。我的 HTML 代码:
<div class="matches-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation"><a class="nav-link active" id="all-matches-tab" data-toggle="tab" href="#all-matches" role="tab" aria-controls="all-matches" aria-selected="true">Home</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" id="upcoming-matches-tab" data-toggle="tab" href="#upcoming-matches" role="tab" aria-controls="upcoming-matches" aria-selected="false">Upcoming Matches</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" id="Subscription-tab" data-toggle="tab" href="#Subscription" role="tab" aria-controls="Subscription" aria-selected="false">Subscription</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="all-matches" role="tabpanel" >
Tab 1
</div>
<div class="tab-pane fade" id="upcoming-matches" role="tabpanel">
Tab 2
</div>
<div class="tab-pane fade" id="Subscription" role="tabpanel">
Tab 3
</div>
</div>
</div>
如果条件
if ($scope.balance >= matchfee){
//change the tab to subscription tab
}
满足将我的标签更改为订阅。
解决方案
据我所知,您的 html 代码。您需要从 angularJS 控制器绑定您的 html 数据。例如。https://material.angularjs.org/latest/demo/tabs '动态标签'。现在你只能使用 CSS 选择器
但是如果你不想动态管理你的标签,你可以使用 ng-class 之类的
<li class="nav-item" role="presentation"><a class="nav-link active" id="all-matches-tab" data-toggle="tab" href="#all-matches" role="tab" aria-controls="all-matches" aria-selected="true">Home</a></li>
To => ng-class="isActiveTab ? 'active' : '' "
推荐阅读
- javascript - 如何按降序更改奇数/偶数div中的背景颜色
- laravel - 有没有可能从 Laravel 中的模型生成数据库的方法?
- xamarin.android - 为什么我的 Google OAuth2 登录正常工作,而忽略了我的应用程序签名密钥库
- ios - 更改可以嵌套在 Swift 中的键的 JSON 值
- python - python3通过按键增加值
- php - Nodejs服务自动停止
- database - 如何审核不同的数据库(Hibernate/Envers)?
- xpath - Xpath 1.0 选择第一个节点回到祖先
- asp.net - 验证 (HTML5):不支持元素“图片” - Visual Studio 2017 社区
- c# - 处理 MassTransit 中的域错误