Javascript 如何使UI路由器打开选项卡
我在第一页上有一个链接,当点击该链接时;转到第二页。我在第二页上有两个标签。我想激活第二个选项卡,用户应该直接看到该选项卡的内容 我尝试过使用ui sref,但它只会让我进入第二页。这是我的密码: 第一页:Javascript 如何使UI路由器打开选项卡,javascript,html,angularjs,Javascript,Html,Angularjs,我在第一页上有一个链接,当点击该链接时;转到第二页。我在第二页上有两个标签。我想激活第二个选项卡,用户应该直接看到该选项卡的内容 我尝试过使用ui sref,但它只会让我进入第二页。这是我的密码: 第一页: <a class="modal-trigger" ui-sref=""manage_schedule({'tab' : 'current'})"> <div class="card-action" id="clients-bar"> More
<a class="modal-trigger" ui-sref=""manage_schedule({'tab' : 'current'})">
<div class="card-action" id="clients-bar">
More Details
</div>
</a>
manage_schedule.html
<div ng-controller="ManageSchedule">
<div class="tabslayout rules">
<ul class="tabs">
<li class="tab col s4" ng-click="getPastRuns(profile_log_url)">
<a href="#pastschedular" ng-class="{'active' : selectedTab=='past'}">
Past Runs({{runDetails.past_total}})
<i class="material-icons refresh-center" ng-if="selectedTab=='past'">refresh</i>
</a>
</li>
<li class="tab col s4" ng-click="getRunningSchedules(running_schedules)">
<a href="#runningschedular" ng-class="{'active' : selectedTab=='current'}">
<i class="material-icons refresh-center" ng-if="selectedTab=='current'">refresh</i>
Currently Executing Runs ({{runDetails.current_total}})
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$("ul.tabs").tabs({});
});
</script>
-
-
$(函数(){
$(“ul.tabs”).tabs({});
});
路由器
$stateProvider
.state('manage_schedule', {
url: "/manage/schedules/:tab",
templateUrl: "/static/manage_schedule.html",
controller: "ManageSchedule"
});
controller('ManageSchedule', function ($scope, $stateParams) {
$("ul.tabs").tabs({
active: $stateParams.tab === "current" ? 1 : 0
});
});
HTML
<div>
<div class="tabslayout rules">
<ul class="tabs">
<li class="tab col s4" ng-click="getPastRuns(profile_log_url)">
<a href="#pastschedular" ng-class="{'active' : selectedTab=='past'}">
Past Runs({{runDetails.past_total}})
<i class="material-icons refresh-center" ng-if="selectedTab=='past'">refresh</i>
</a>
</li>
<li class="tab col s4" ng-click="getRunningSchedules(running_schedules)">
<a href="#runningschedular" ng-class="{'active' : selectedTab=='current'}">
<i class="material-icons refresh-center" ng-if="selectedTab=='current'">refresh</i>
Currently Executing Runs ({{runDetails.current_total}})
</a>
</li>
</ul>
</div>
</div>
controller('ManageSchedule', function ($scope, $stateParams) {
$("ul.tabs").tabs({
active: $stateParams.tab === "current" ? 1 : 0
});
});