angular.js - angularjs tab switching

Question

{Code...} {Code...} The default is as shown below: When I click on the account settings, I hope that the current status is in the account settings, but the effect is indeed as follows. Please help me find out what the problem is. Thanks in advance. Passed~~~

習慣沉默 · Answer

Recommend you to use itangular的ui-router, it is very convenient and very powerful; I will see if I have time and write a small demo for you.

Added:

I took the time to write a demo for you

HTML file code is as follows:


    A demo of ui-router
    
        
            个人设置
        
        
            账号设置
        
        
     随便看看
        
    
    
    初始化状态...

The JS file code is as follows:

(function(){
    angular.module('MyApp', [
        'ui.router',
        'ngAnimate'
    ])
        .config(config)
        .controller('MyController', MyController);

    config.$inject = ['$stateProvider', '$urlRouterProvider'];
    MyController.$inject = [];

    function config($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('setting/default');

        $stateProvider
            .state('account-setting',
            {
                url: 'setting/account',
                templateUrl: 'template/account-setting.html'
            })
            .state('personal-setting',
            {
                url: 'setting/personal',
                templateUrl: 'template/personal-setting.html'
            })
            .state('hello-setting',
            {
                url: 'setting/hello',
                templateUrl: 'template/hello-setting.html'
            })
            .state('default-setting',
            {
                url: 'setting/default',
                templateUrl: 'template/default-setting.html'
            })
    }

    function MyController(){
        var vm = this;
    }

})();

The CSS file code is as follows:

h1{
    text-align: center;
}
.menu{
    list-style: none;
}
.menu .item{
    display: block;
    width: 80px;
    height: 30px;
    margin-top: 2px;

}
.menu .item a{
    display: block;
    width: 80px;
    height: 30px;
    background-color: black;
    color: red;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
}

.item-active{
    background-color: red !important;
    color: black !important;
}

Hope this helps.

巴扎黑 · Answer

PHP中文网 · Answer

Owner, can you post your complete example? I need to learn from it