angular 实现 tab切换导航

资源分类：Ajax框架/RIA
发布人：房东的猫
文件大小：492831
文件格式：.zip
浏览次数：19
下载次数： 0
发布时间：9月4日

开通会员每日领积分！

8.5玩家评分(1人评分)

下载后可评

介绍评论  失效链接反馈

<!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>

下载angular 实现 tab切换导航用户还喜欢

发表评论必须先登陆，您可以登陆或者注册新账号 !

angular 实现 tab切换导航

评论

作者专栏

编辑推荐