angular.js - angularjs標籤切換

Question

{代碼...} {代碼...} 預設如下圖： 點帳號設定的時候我希望當前狀態在帳號設定上但是效果確是下面這樣子的路過的幫我看看是什麼問題唄，先謝過啦～～～

習慣沉默 · Answer

推薦你使用angular的ui-router，很方便，而且更能十分強大；我看看有沒有時間，幫你寫個小demo。

補充：

抽空幫你寫的一個demo

HTML檔程式碼如下：


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

JS檔案代碼如下：

(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;
    }

})();

CSS檔案代碼如下：

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;
}

希望可以幫助你。

巴扎黑 · Answer

PHP中文网 · Answer

樓主，能不能將你的完整的例子貼出來啊，小弟需要學習一下