码迷,mamicode.com
首页 > 其他好文 > 详细

angular实现的tab栏切换

时间:2016-10-02 21:41:11      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏</title>
    <style>
        .active {
            background-color: orange;
        }
    </style>
    <script src="node_modules/angular/angular.js"></script>
</head>
<body ng-app="s1.app">
<div>
    <button ng-class="{ ‘active‘ : data.current == 1 }" ng-click="actions.setCurrent(1)">张三</button>
    <button ng-class="{ ‘active‘ : data.current == 2 }" ng-click="actions.setCurrent(2)">李四</button>
    <button ng-class="{ ‘active‘ : data.current == 3 }" ng-click="actions.setCurrent(3)">王五</button>
</div>
<div>
    <div ng-if="data.current == 1">张三的个人信息</div>
    <div ng-if="data.current == 2">李四的个人信息</div>
    <div ng-if="data.current == 3">王五的个人信息</div>
    <script>
        var app = angular.module(‘s1.app‘, []);
        app.run(function ($rootScope) {
            $rootScope.data = {
                current: "1" // 1代表张三,2代表李四,3代表王五
            };
            $rootScope.actions =
            {
                setCurrent: function (param) {
                    $rootScope.data.current = param;
                }
            }
        })
    </script>
</div>
</body>
</html>

 

angular实现的tab栏切换

标签:

原文地址:http://www.cnblogs.com/lsy0403/p/5927993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!