2014年03月15日

AngularJSでタブパネル

タブパネルシリーズをAngularJSで。



<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a.active{
font-weight:bold;
}
</style>
</head>
<body>
<div ng-app="tabPanel" ng-controller="tabPanelCtrl" ng-click="tabChange($event)">
<a href="#tab1" ng-class="{'active':tabSelected=='#tab1'}">tab1</a>
<a href="#tab2" ng-class="{'active':tabSelected=='#tab2'}">tab2</a>
<a href="#tab3" ng-class="{'active':tabSelected=='#tab3'}">tab3</a>
<div id="tab1" class="ng-hide" ng-show="tabSelected=='#tab1'">CSS1</div>
<div id="tab2" class="ng-hide" ng-show="tabSelected=='#tab2'">CSS2</div>
<div id="tab3" class="ng-hide" ng-show="tabSelected=='#tab3'">CSS3</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script>
var app = angular.module("tabPanel",[]);
app.controller("tabPanelCtrl",function($scope){
$scope.tabSelected = "#tab1";
$scope.tabChange = function(e){
if (e.target.nodeName === 'A') {
$scope.tabSelected = e.target.getAttribute("href");
e.preventDefault();
}
}
})
</script>
</body>
</html>
タグ:AngularJS
posted by ねこまんま at 11:31 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/391507504
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック