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

楼主，能不能将你的完整的例子贴出来啊，小弟需要学习一下