首頁 >web前端 >js教程 >angularjs如何實作tab切換與選取切換

angularjs如何實作tab切換與選取切換

小云云原創: 2018-03-29 09:53:062294瀏覽

本文主要和大家分享angularjs如何實現tab切換和選取切換，主要以程式碼的形式和大家分享，希望能幫助大家。

<!DOCTYPE html><html ng-app=&#39;app&#39;><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=&#39;tabcontroller&#39;>
        <div>
            <ul ng-init=&#39;selected=0&#39;>
                <li ng-class=&#39;{active:selected==$index}&#39; ng-click=&#39;show($index)&#39; ng-repeat=&#39;item in title&#39;>{{item.name}}</li>
            </ul>
            <div class="TabCon">
                <div ng-show=&#39;selected==$index&#39; ng-repeat=&#39;item in vm&#39;>{{item.con}}</div>
            </div>
        </div>
        <div class="box">
            <div ng-init=&#39;selected1=0&#39;>
                <span class="change" ng-class=&#39;{changed:selected1==$index}&#39; ng-click=&#39;show1($index)&#39; ng-repeat=&#39;item in title&#39;>{{item.name}}</li>
            </div>
        </div>
    </div></body><script type="text/javascript">
    var app = angular.module(&#39;app&#39;, []);
    app.controller(&#39;tabcontroller&#39;, function ($scope) {
        $scope.title = [{ &#39;name&#39;: &#39;tab1&#39; }, { &#39;name&#39;: &#39;tab2&#39; }, { &#39;name&#39;: &#39;tab3&#39; }, { &#39;name&#39;: &#39;tab4&#39; }]
        $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>

相關建議：

Vue2 tab切換標籤的方法

微信小程式實作tab切換效果實例分享

JavaScript實作Tab切換的圖文介紹

以上是angularjs如何實作tab切換與選取切換的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：lselect的option疊加問題如何解決下一篇：lselect的option疊加問題如何解決

看更多