angularjs实现tab切换和选中切换

最新推荐文章于 2021-11-04 17:25:09 发布

longzhoufeng

最新推荐文章于 2021-11-04 17:25:09 发布

阅读量3.2k

点赞数 1

分类专栏： Angular

本文链接：https://blog.csdn.net/longzhoufeng/article/details/79724436

版权

Angular 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app='app'>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .TabNav {
            height: 131px;
            position: relative;
            margin-left: 100px;
            margin-top: 100px;
        }

        .TabNav ul li {
            float: left;
            background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#ededed));
            border: 1px solid #ccc;
            padding: 5px 0;
            width: 100px;
            text-align: center;
            margin-left: -1px;
            position: relative;
            cursor: pointer;
        }

        .TabCon {
            position: absolute;
            left: -1px;
            top: 30px;
            border: 1px solid #ccc;
            border-top: none;
            width: 403px;
            height: 100px;
        }

        .TabNav ul li.active {
            background: #FFFFFF;
            border-bottom: none;
        }

        .TabNav ul li.active1 {
            background: #FFFFFF;
        }

        .box {
            width: 1000px;
        }

        .change {
            background: cyan;
            padding: 5px 10px;
            width: 100px;
            height: 40px;
            float: left;
            border: 1px solid #ddd;
        }

        .changed {
            background-color: cadetblue;
            border: 1px solid red;
        }
    </style>
    <script src="angularjs/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div class="TabNav" ng-controller='tabcontroller'>
        <div>
            <ul ng-init='selected=0'>
                <li ng-class='{active:selected==$index}' ng-click='show($index)' ng-repeat='item in title'>{{item.name}}</li>
            </ul>
            <div class="TabCon">
                <div ng-show='selected==$index' ng-repeat='item in vm'>{{item.con}}</div>
            </div>
        </div>
        <div class="box">
            <div ng-init='selected1=0'>
                <span class="change" ng-class='{changed:selected1==$index}' ng-click='show1($index)' ng-repeat='item in title'>{{item.name}}</li>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('tabcontroller', function ($scope) {
        $scope.title = [{ 'name': 'tab1' }, { 'name': 'tab2' }, { 'name': 'tab3' }, { 'name': 'tab4' }]
        $scope.vm = [
            { "list": "tab1", "con": "aaaaaaaaaaaaaaaaa" },
            { "list": "tab2", "con": "bbbbbbbbbbbbbbbbb" },
            { "list": "tab3", "con": "ccccccccccccccccc" },
            { "list": "tab4", "con": "ddddddddddddddddd" }
        ];
        //tab选项
        var selected = $scope.selected;
        $scope.show = function (index) {
            $scope.selected = index;
        };
        //按钮选中选项
        var selected1 = $scope.selected1;
        $scope.show1 = function (index) {
            $scope.selected1 = index;
        };
    });
</script>

</html>