angular 实现 tab切换导航

基本信息

源码名称：angular 实现 tab切换导航

源码大小：0.47M

文件格式：.zip

开发语言：js

更新时间：2019-01-11

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559

本次赞助数额为： 2 元　

源码介绍

<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="myController">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .box {
            width: 1000px;
            margin: 30px auto;
        }

        .box .title {
            width: 400px;
            height: 44px;
            position: relative;
            top: 3px;
            background: #fff;
        }

        .box .content {
            width: 1000px;
            height: 475px;

        }

        .box .content img {
            width: 400px;
        }

        .box ul {
            display: flex;
        }

        .box ul li {
            flex: 1;
            text-align: center;
        }

        .box ul .cur {
            color: darkorange;
        }

    </style>

</head>
<body>

<div class="box">
    <div class="title">
        <ul>
            <li ng-class="{cur:person == '水门'}" ng-mouseover="move('水门')">水门</li>
            <li ng-class="{cur:person == '自来也'}" ng-mouseover="move('自来也')">自来也</li>
            <li ng-class="{cur:person == '卡卡西'}" ng-mouseover="move('卡卡西')">卡卡西</li>
            <li ng-class="{cur:person == '鸣人'}" ng-mouseover="move('鸣人')">鸣人</li>
        </ul>
    </div>

    <div class="content" ng-switch="person">
        <div ng-switch-default><img src="image/01.jpg" alt=""></div>
        <div ng-switch-when="自来也"><img src="image/02.jpg" alt=""></div>
        <div ng-switch-when="卡卡西"><img src="image/03.jpg" alt=""></div>
        <div ng-switch-when="鸣人"><img src="image/04.jpg" alt=""></div>
    </div>

</div>
<script src="js/angular.js"></script>
<script>
    // 创建模块
    var app = angular.module('app', []);
    // 创建控制器
    app.controller('myController', ['$scope', function ($scope) {
        $scope.title = 'tab';
        $scope.person = '水门';
        // 绑定事件
        $scope.move = function (regs) {
            $scope.person = regs;
        }
    }]);
</script>
</body>


</html>