Anglar js选项卡

来源：互联网发布：js删除数组指定下标编辑：程序博客网时间：2024/06/05 21:59
<!DOCTYPE html><html lang="en" ng-app="myApp"><head>    <meta charset="UTF-8">    <title>选项卡</title>    <style>        * {            margin: 0;            padding: 0;        }        #uu {            list-style: none;            margin: 0 auto;            width: 850px;        }        #uu li {            width: 200px;            height: 40px;            line-height: 40px;            border: 1px solid black;            float: left;            margin: 5px;            text-align: center;        }        #d2 {            width: 800px;            height: 400px;            border: 1px solid black;            overflow: hidden;            clear: both;            margin: 0 auto;            position: relative;        }        #d2 p {            position: absolute;            top: 0;            left: 0;        }        .btn_in {            background: blue;        }        .ll {            background-color: lightgreen;        }        .p1 {            display: none;        }        .sho {            display: block;        }    </style>    <script src="js/angular.min.js"></script>    <script>        var app = angular.module("myApp", []);        app.controller("Deom", ["$scope", function($scope) {            $scope.selected = 0;//默认选中第一个            $scope.list = [{title:"列表一"},{title:"列表二"},{title:"列表三"},{title:"列表四"}];            $scope.text = ["第一", "第二", "第三", "第四"];            $scope.show = function(i) {                $scope.selected = i;            }        }]);    </script></head><body ng-app="myApp">    <div ng-controller="Deom">        <ul id="uu" ng-repeat="t in list"><!--重复-->            <!--ng-click="show($index)"切换选中的选项卡-->            <li ng-class="{ll: $index==selected}" ng-click="show($index)">{{t.title}}</li>        </ul>        <div id="d2">            <p ng-repeat="c in text" class="p1" ng-class="{sho: $index==selected}">                {{c}}            </p>        </div>    </div></body></html>
阅读全文
0 0