问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

侧栏菜单点击其中一项，在右侧显示如何通过js实现？

头像
我是大头娃娃
    111
    头像
    陈安柱
      4k2319
      新手上路，请多包涵
      <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>菜鸟教程(runoob.com)</title>
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="https://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
    
    angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          // org.apache.cordova.statusbar required
          StatusBar.styleDefault();
        }
      });
    })

    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider

        .state('app', {
          url: "/app",
          abstract: true,
          templateUrl: "menu.html",
          controller: 'AppCtrl'
        })

        .state('app.playlists', {
          url: "/playlists",
          views: {
            'menuContent' :{
              templateUrl: "playlists.html",
              controller: 'PlaylistsCtrl'
            }
          }
        })


      // if none of the above states are matched, use this as the fallback
      $urlRouterProvider.otherwise('/app/playlists');
    })

    .controller('AppCtrl', function($scope) {
    })

    .controller('PlaylistsCtrl', function($scope) {
      console.log("PlaylistsCtrl");
      $scope.playlists = [
        { title: 'Reggae', id: 1 },
        { title: 'Chill', id: 2 },
        { title: 'Dubstep', id: 3 },
        { title: 'Indie', id: 4 },
        { title: 'Rap', id: 5 },
        { title: 'Cowbell', id: 6 }
      ];
    })

    .controller('PlaylistCtrl', function($scope, $stateParams) {
    })

    </script>

  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
    
    <script id="menu.html" type="text/ng-template">
        
    <ion-side-menus>

      <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios7">
          <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
      </ion-pane>

      <ion-side-menu side="left">
        <header class="bar bar-header bar-stable">
          <h1 class="title">Left</h1>
        </header>
        <ion-content class="has-header">
          <ion-list>
            <ion-item nav-clear menu-close href="#/app/search">
              Search
            </ion-item>
            <ion-item nav-clear menu-close href="#/app/browse">
              Browse
            </ion-item>
            <ion-item nav-clear menu-close href="#/app/playlists">
              Playlists
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-side-menu>
    </ion-side-menus>
      
    </script>

    <script id="playlists.html" type="text/ng-template">
    <ion-view title="Playlists">
      <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-buttons>


      <ion-tabs class="tabs-positive tabs-icon-only">

        <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" class="has-header">
          <!-- Tab 1 content -->
          <ion-content>
          <ion-list>
            <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
            {{playlist.title}}
            </ion-item>
          </ion-list>
            
          </ion-content>
        </ion-tab>

        <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
          <!-- Tab 2 content -->
          <ion-content>
          <h1>About</h1>
            
          </ion-content>
        </ion-tab>

        <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
          <!-- Tab 3 content -->
          <ion-content>
          <h1>Settings</h1>
            
          </ion-content>
        </ion-tab>

      </ion-tabs>

    </ion-view>  
    </script>
      
 
  </body>
</html>
      html5cssjavascript
      阅读 3.3k
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题