先上效果图
css代码比较简单不做过多解释哈
1. *{ 2. margin: 0; 3. padding: 0; 4. } 5. .odiv{ 6. width: 500px; 7. height: auto; 8. margin: 0 auto; 9. } 10. ul li{ 11. list-style: none; 12. float: left; 13. width: 98px; 14. height: 30px; 15. text-align: center; 16. line-height: 30px; 17. border: 1px solid #999; 18. } 19. p{ 20. width: 500px; 21. height: 300px; 22. border: 1px solid #000000; 23. border-top: none; 24. } 25. 26. // aaa指的是点击导航时所变得背景颜色 27. .aaa{ 28. background: #ff0; 29. }
html代码
1. <!-- 通过 ng-app 来定义angular执行位置 ， 通过ng-controller 来确定控制器的执行--> 2. <body ng-app="myApp" ng-controller="myCtrl"> 3. <div class="odiv" > 4. <!--ng-init="seleted=0" 初始设置seleted 的索引值为0 --> 5. <ul ng-init="seleted=0"> 6. <!--ng-class="{aaa:seleted==$index}" 定义class名为aaa 并定义选中第几个li, 7. ng-repeat="item in lists" 遍历数据 8. ng-click="tab($index)" 点击谁就让谁出现改变 9. --> 10. <li ng-class="{aaa:seleted==$index}" ng-repeat="item in lists" ng-click="tab($index)"> 11. {{item.name}} 12. </li> 13. </ul> 14. <!--ng-show="seleted==$index" 通过show函数来确定谁显示，谁隐藏--> 15. <p ng-show="seleted==$index" ng-repeat="item in lists"> 16. {{item.con}} 17. </p> 18. </div> 19. 20. </body>
angular代码
1. //定义模板，控制器 2. var module=angular.module("myApp",[]); 3. module.controller("myCtrl",function($scope){ 4. $scope.lists=[ 5. {"name":"李白","con":"金樽清酒斗十千"}, 6. {"name":"白居易","con":"玉盘珍羞直万钱"}, 7. {"name":"杜甫","con":"安得广厦千万间"}, 8. {"name":"李贺","con":"大庇天下寒士俱欢颜"}, 9. {"name":"李清照","con":"一帘幽梦，一世情肠"} 10. 11. ]; 12. //定义seleted 13. var seleted=$scope.seleted 14. //对seleted 进行赋值 15. $scope.tab=function(index){ 16. $scope.seleted=index 17. 18. } 19. 20. 21. })
对于初学者来说angular可能存在不理解的状态，针对这种现象建议多敲几变，或者尝试写一个项目，对自己的提升会有很大的帮助哦！
