AngularJS 导航菜单示例
时间:2021-11-30 作者:匿名
这是一个简单的导航菜单示例,只有主菜单,没有二级菜单,例子中讲解了活动变量的使用,导航菜单将以类的形式获取“活动”变量的值,$event.preventDefault()在单击链接时阻止页面跳转。例子中还用到了CSS,如果没有学习CSS看不懂的话可以避开CSS部分。
当我们点击某个菜单项目的时候,程序能够识别到点击的是哪一个,并且获取到对应信息显示出来。
完整代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" /> <!-- The main CSS file --> <style> /*------------------------- Simple reset --------------------------*/ *{ margin:0; padding:0; } /*------------------------- General Styles --------------------------*/ body{ font:15px/1.3 'Open Sans', sans-serif; color: #5e5b64; text-align:center; } a, a:visited { outline:none; color:#389dc1; } a:hover{ text-decoration:none; } section, footer, header, aside, nav{ display: block; } /*------------------------- The menu --------------------------*/ nav{ display:inline-block; margin:60px auto 45px; background-color:#55B460; box-shadow:0 1px 1px #ccc; border-radius:2px; } nav a{ display:inline-block; padding: 18px 30px; color:#fff !important; font-weight:bold; font-size:16px; text-decoration:none !important; line-height:1; text-transform: uppercase; background-color:transparent; -webkit-transition:background-color 0.25s; -moz-transition:background-color 0.25s; transition:background-color 0.25s; } nav a:first-child{ border-radius:2px 0 0 2px; } nav a:last-child{ border-radius:0 2px 2px 0; } nav.home .home, nav.list .list, nav.team.team, nav.about .about, nav.contact .contact{ background-color:#5867E3; } p{ font-s color:#7d9098; } p b{ color:#ffffff; display:inline-block; padding:5px 10px; background-color:#DC64C6; border-radius:2px;ize:22px; font-weight:bold; text-transform:uppercase; font-size:18px; } </style> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <!-- ng app指令告诉angular应该计算下面的代码 --> <body ng-app> <!-- 导航菜单将以类的形式获取“活动”变量的值。$event.preventDefault()在单击链接时阻止页面跳转。 --> <nav class="{{active}}" ng-click="$event.preventDefault()"> <!-- 单击菜单中的链接时,我们设置活动变量 --> <a href="#" class="home" ng-click="active='home'">主页</a> <a href="#" class="list" ng-click="active='list'">产品列表</a> <a href="#" class="about" ng-click="active='about'">关于我们</a> <a href="#" class="contact" ng-click="active='contact'">联系方式</a> </nav> <!-- 如果引号中的值真实,ng show将显示一个元素, 而ng hide则相反。因为未设置活动变量 最初,这将导致第一段可见。--> <p ng-show="active">你选择了 <b>{{active}}</b></p> <!-- 引入AngularJS --> <script src="https://www.yangzhiw.cn/static/js/angularjs-1.5.8/angular.min.js"></script> </body> </html>