Anglar js选项卡

最新推荐文章于 2025-08-19 08:41:01 发布

biggrand

最新推荐文章于 2025-08-19 08:41:01 发布

阅读量326

点赞数

CC 4.0 BY-SA版权

文章标签： javascript angularjs

本文链接：https://blog.youkuaiyun.com/biggrand/article/details/78495808

本文介绍了一个使用AngularJS实现的选项卡效果示例。通过AngularJS指令和控制器结合CSS样式，实现了动态显示隐藏的内容区域及平滑切换的效果。文章包含完整的HTML、CSS和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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