您的位置：首页 > Web前端 > AngularJS

angularjs学习记录--tab选项卡效果

2016-05-20 15:55 423 查看

一直用原生JS和jquery写页面交互，一直觉得很正常，直到近期学习angularjs才发现原生js与jquery的dom操作是多么舒服。

今天记录下困扰了两天的tab选项卡效果。

苦苦寻找，终于搜到了两个方法：

1、代码片段：

<div>

<li ng-click="tabs('t1')" ng-class="{active: isActiveTab('t1'l)}">选项卡一</li>

<li ng-click="tabs('t2')" ng-class="{active: isActiveTab('t2')}">选项卡二</li>

<li ng-click="tabs('t3')" ng-class="{active: isActiveTab('t3')}">选项卡三</li>

</div>

<script type="text/ng-template" id="one">

<p>选项卡一内容</p>

</script>

<script type="text/ng-template" id="two">

<p>选项卡二内容</p>

</script>

<script type="text/ng-template" id="three">

<p>选项卡三内容</p>

</script>
<script>

angular.module("app",[]).controller("cont",function(){

$scope.curTab = "t1";

$scope.tabs = function(tabUrl){

$scope.curTab = tabUrl;

}

$scope.isActiveTab = function( name ) {

return name == $scope.curTab;

}

})

</script>

2、代码片段

<body ng-controller="abc" >

<div class="div1" ng-init="tab=1">

<li ng-mouseenter="tabs(1)" ng-class="{'active' : tab==1}" >11111111</li>

<li ng-mouseenter="tabs(2)" ng-class="{'active' : tab==2}" >2222222</li>

<li ng-mouseenter="tabs(3)" ng-class="{'active' : tab==3}" >33333333</li>

<li ng-mouseenter="tabs(4)" ng-class="{'active' : tab==4}" >4444444</li>

<li ng-mouseenter="tabs(5)" ng-class="{'active' : tab==5}" >55555555</li>

<li ng-mouseenter="tabs(6)" ng-class="{'active' : tab==6}" >6666666</li>

</div>

<div class="div2">

<li ng-if="tab == 1">a1111</li>

<li ng-if="tab == 2">a2222</li>

<li ng-if="tab == 3">a3333</li>

<li ng-if="tab == 4">a4444</li>

<li ng-if="tab == 5">a5555</li>

<li ng-if="tab == 6">a6666</li>

</div>

<script type="text/javascript">

angular.module("app",[])

.controller("abc",function($scope) {

$scope.tabs = function( num ) {

$scope.tab = num;

}

})

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航