3

AngularJS で、単純なタブ付きナビゲーション (タブがクリックされるとコンテンツを切り替える) を作成するにはどうすればよいですか?

HTML:

<ul class="tabbed-navi">
    <li class="active">
        <a href="#one">Nav One</a>
    </li>
    <li>
        <a href="#two">Nav Two</a>
    </li>
    <li>
        <a href="#three">Nav Three</a>
    </li>
</ul>

<div class="active">
    Content One
</div>
<div>
    Content Two
</div>
<div>
    Content Three
</div>

「これらの他のものをダウンロードしてから...」ではなく、シンプルで初心者に優しい例を探しています。

4

2 に答える 2

2

AngularJS ホームページの「コンポーネントの作成」セクションを参照してください。このサンプル アプリでは、 と の 2 つのディレクティブが定義paneされてtabsいます。

これがどのように機能するかについての追加説明については、AngularJS コントローラーの「this」と $scope を参照してください。

于 2013-03-18T15:45:43.430 に答える
1

たぶん、このようなもの...

<ul class="tabbed-navi">
    <li class="active">
        <a href ng-click="option=1">Nav One</a>
    </li>
    <li>
        <a href ng-click="option=2">Nav Two</a>
    </li>
    <li>
        <a href ng-click="option=3">Nav Three</a>
    </li>
</ul>

<div ng-class="option==1? 'active':''">
    Content One
</div>
<div ng-class="option==2? 'active':''">
    Content Two
</div>
<div ng-class="option==3? 'active':''">
    Content Three
</div>

于 2015-02-04T00:44:41.167 に答える