gpt4 book ai didi

angularjs - 在 AngularJS/Bootstrap 中进行标签导航的正确方法

转载 作者:行者123 更新时间:2023-12-03 08:15:00 25 4
gpt4 key购买 nike

我想使用 AngularJs 和 Bootstrap 为网站设置基于选项卡的导航,并且我想以“正确”的方式进行操作。据我所知,设置 Angular 站点的“正确”方式是通过 AngularJS Seed .我实现了这个,我得到了一个模板化的多文件选项卡网站,它具有以下基本成分。

带 Angular

索引.html:

  <ul class="nav nav-tabs">
<li class="active"><a href="#/view1">Home</a></li>
<li><a href="#/view2">Menu 1</a></li>
</ul>

<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>

view1.js:
'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])

.controller('View1Ctrl', [function() {

}]);

view1.html:
<div>here's some html</div>

...对于 View 2。

带 Bootstrap

据我所知,使用 Bootstrap 实现选项卡的“正确”方法如下:

索引.html:
<div class="container">

<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#red" data-toggle="tab">Red</a></li>
<li><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
<li><a href="#green" data-toggle="tab">Green</a></li>
<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>

经过大量的困惑,我似乎仍然无法使用 Angulars 模板模型获得 Bootstrap 功能。任何人都可以建议我这样做的“正确”方法吗?

最佳答案

看看UI Bootstrap .它本质上是使用 Angular 指令构建的 Bootstrap 组件。有一个 Tabs 指令可以简化您要完成的工作。

关于angularjs - 在 AngularJS/Bootstrap 中进行标签导航的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29934180/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com