在AngularJS中加载页面时,默认选择第一个选项卡可以通过以下步骤实现:
<div ng-controller="TabController">
<ul class="nav nav-tabs">
<li ng-repeat="tab in tabs" ng-class="{active: tab.active}">
<a href="" ng-click="selectTab(tab)">{{tab.title}}</a>
</li>
</ul>
<div class="tab-content">
<div ng-repeat="tab in tabs" ng-show="tab.active">
{{tab.content}}
</div>
</div>
</div>
app.controller('TabController', function($scope) {
$scope.tabs = [
{ title: 'Tab 1', content: 'This is the content of tab 1', active: true },
{ title: 'Tab 2', content: 'This is the content of tab 2', active: false },
{ title: 'Tab 3', content: 'This is the content of tab 3', active: false }
];
$scope.selectTab = function(tab) {
angular.forEach($scope.tabs, function(tab) {
tab.active = false;
});
tab.active = true;
};
});
app.controller('TabController', function($scope) {
// ...
// 默认选中第一个选项卡
$scope.tabs[0].active = true;
// ...
});
这样,在页面加载时,第一个选项卡会被默认选中并显示对应的内容。
推荐的腾讯云相关产品:腾讯云云服务器(CVM) 腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供高性能、可靠稳定的云服务器实例。您可以根据业务需求选择不同配置的云服务器,并通过腾讯云控制台或API进行管理和操作。
产品介绍链接地址:腾讯云云服务器(CVM)
领取专属 10元无门槛券
手把手带您无忧上云