简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
angular.js - angularjs标签切换
为情所困
为情所困 2017-05-15 16:54:49
0
3
529 
$scope.peopleprofile = true; $scope.peoplesettings = false; if( $scope.locationpath == '/peopleProfile'){ $scope.peopleprofile = true; $scope.peoplesettings = false; }else if( $scope.locationpath == '/peopleSettings'){ $scope.peoplesettings = true; $scope.peopleprofile = false; } $scope.go = function(url, type){ if( type == 'peopleprofile'){ $scope.peopleprofile = true; $scope.peoplesettings = false; }else if( type == 'peoplesettings'){ $scope.peoplesettings = true; $scope.peopleprofile = false; } routeSrvc.go(url); };
 个人设置 
 
 账号设置

默认如下图：

点账号设置的时候 我希望当前状态在账号设置上 但是效果确是下面这样子的

路过的帮我看看是什么问题呗，先谢过啦～～～

为情所困
为情所困

Antworte allen (3)
習慣沉默
習慣沉默2017-05-15 16:56:49 3 Etage

推荐你使用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; }

希望可以帮到你。

Wie+0
Antwort hinzufügen
    巴扎黑
    巴扎黑2017-05-15 16:56:49 2 Etage 
     
      个人设置  
     
      账号设置
    Wie+0
    Antwort hinzufügen
      Ty80
      Ty802017-05-15 16:56:49 1 Etage

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

      Wie+0
      Antwort hinzufügen
        Beliebte Themen
        Mehr>
        Populäre Artikel
        Beliebte Tutorials
        Mehr>
        Verwandte Tutorials
        Beliebte Empfehlungen
        Aktuelle Kurse
        Neueste Downloads
        Mehr>
        Web-Effekte
        Quellcode der Website
        Website-Materialien
        Frontend-Vorlage
        Über uns Haftungsausschluss Sitemap
        Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！