How to implement tab switching and selection switching in angularjs-JS Tutorial-php.cn

How to implement tab switching and selection switching in angularjs

小云云

Release： 2018-03-29 09:53:06

Original

2244 people have browsed it

This article mainly shares with you how to implement tab switching and selection switching in angularjs. It is mainly shared with you in the form of code. I hope it can help everyone.

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

Copy after login

Related recommendations:

Vue2 tab switching method

WeChat applet implementation of tab switching effect example sharing

Image and text introduction of using JavaScript to implement Tab switching

The above is the detailed content of How to implement tab switching and selection switching in angularjs. For more information, please follow other related articles on the PHP Chinese website!