LoginSignup
0

More than 5 years have passed since last update.

ポータルサイト風タブパネル

Posted at

 jQueryと書かれていた部分をAngularJSに書き換えてやるなどの悪事をはたらきました

index.html

<div id="container">
    <ul class="tab">
        <li ng-click="selectedTab=1" ng-class="{selected : selectedTab==1}">JavaScript</li>
        <li ng-click="selectedTab=2" ng-class="{selected : selectedTab==2}">CSS</li>
        <li ng-click="selectedTab=3" ng-class="{selected : selectedTab==3}">HTML</li>
        <li ng-click="selectedTab=4" ng-class="{selected : selectedTab==4}">AngularJS</li>
        <li ng-click="selectedTab=5" ng-class="{selected : selectedTab==5}">HTML5</li>
    </ul>
    <ul class="panel">
        <li ng-show="selectedTab==1">...</li>
        <li ng-show="selectedTab==2">...</li>
        <li ng-show="selectedTab==3">...</li>
        <li ng-show="selectedTab==4">...</li>
        <li ng-show="selectedTab==5">...</li>
    </ul>
</div>

 あとはこれ<div id="container" ng-init="selectedTab=1">とかって書き方をしてやるともはやコントローラも必要ないですね。
 実業務だとAPIから文字列受け取りとかになって結局必要にはなりますが(´@ω@`)

 何を書けばいいんだろう(´@ω@`)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0