Bootstrap 导航栏使用角度路线故障到特定活动选项卡的左侧

Question

对不起，如果这是一个愚蠢的问题，我是网页设计的初学者，即使在这里进行了大量的谷歌搜索/搜索，也找不到答案。

因此，正如您在标题中所读到的，我的问题是，在我的导航栏中单击“EX5”或“EX6”时，它会出现故障到屏幕的左侧，而不是停留在顶部。

下面是我的代码，因为 EX5 和 EX6 基本上是一样的，我会在这里发布较短的代码：

导航栏：


    <!DOCTYPE html>
    <html ng-app='sampleApp'>
    
    <head>
        <link data-require="bootstrap-css" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
        <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
        <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular-route.js" data-semver="1.4.9"></script>
        <script src="../js/script.js"></script>
        <script src="../js/headerController.js"></script>
    </head>
    
    <body>
    
      <header>
        <nav class="navbar navbar-default" ng-controller="HeaderController">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="#">JS</a>
            </div>
            <ul class="nav navbar-nav">
              <li ng-class="{ active: isActive('/')}"><a href="#/ex1">EX1</a></li>
              <li ng-class="{ active: isActive('/ex2')}"><a href="#/ex2">EX2</a></li>
              <li ng-class="{ active: isActive('/ex3')}"><a href="#/ex3">EX3</a></li>
              <li ng-class="{ active: isActive('/ex4')}"><a href="#/ex4">EX4</a></li>
              <li ng-class="{ active: isActive('/ex5')}"><a href="#/ex5">EX5</a></li>
              <li ng-class="{ active: isActive('/ex6')}"><a href="#/ex6">EX6</a></li>
              <li ng-class="{ active: isActive('/ex7')}"><a href="#/ex7">EX7</a></li>
              <li ng-class="{ active: isActive('/ex8')}"><a href="#/ex8">EX8</a></li>
              <li ng-class="{ active: isActive('/ex9')}"><a href="#/ex9">EX9</a></li>
              <li ng-class="{ active: isActive('/ex10')}"><a href="#/ex10">EX10</a></li>
            </ul>
          </div>
        </nav>
      </header>
      <ng-view></ng-view>
    </body>
    </html>

EX6：


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../styles/stylesheet.css"> 
        <title>Exercise 6</title>
        <script src="../js/script.js"></script>
    </head>
    <body>
        <div>
            <h2>Add an image, upon clicking, change the image</h2>
            <hr>
            <img onclick="changeImg()" id="sourceImg" src="../styles/images/diluc.jpg" alt="diluc">
        </div>
        
        
    </body>
    </html>

脚本：

//change img
var currentImage = "../styles/images/diluc.jpg"

function changeImg(){
  if(currentImage == "../styles/images/diluc.jpg"){
  document.getElementById("sourceImg").src="../styles/images/venti.jpg";
  currentImage = "../styles/images/venti.jpg"
}else{
  document.getElementById("sourceImg").src = "../styles/images/diluc.jpg"
  currentImage = "../styles/images/diluc.jpg"
}
}

/////Nav
(function () {

  var app = angular.module('sampleApp',['ngRoute']);
  
  app.config(function ($routeProvider){
      $routeProvider
          .when('/',{
              templateUrl:'../exercises/ex1.html'
          })
          .when('/ex2',{
              templateUrl:'../exercises/ex2.html'
          })
          .when('/ex3',{
              templateUrl:'../exercises/ex3.html'
          })
          .when('/ex4',{
            templateUrl:'../exercises/ex4.html'
          })  
          .when('/ex5',{
            templateUrl:'../exercises/ex5.html'
          })  
          .when('/ex6',{
            templateUrl:'../exercises/ex6.html'
          })  
          .when('/ex7',{
            templateUrl:'../exercises/ex7.html'
          })  
          .when('/ex8',{
            templateUrl:'../exercises/ex8.html'
          })  
          .when('/ex9',{
            templateUrl:'../exercises/ex9.html'
          })  
          .when('/ex10',{
            templateUrl:'../exercises/ex10.html'
          })  
          .otherwise({ redirectTo:'/'});
  });
})();

我的标题控制器：

(function () { 
 
    var headerController = function ($scope, $location) 
      { 
          $scope.isActive = function (viewLocation) { 
              return viewLocation === $location.path();
          };
      };
      
      angular.module('sampleApp').controller('HeaderController',headerController);
  }());

最后是我的 3 行 css：

#sourceImg{
    width: 500px;
}

我将不胜感激您的帮助，因为我无法自己解决这个问题。 谢谢

Answer 1

解决了，问题出在我的 css 文件上，里面有一些乱码

Bootstrap 导航栏使用角度路线故障到特定活动选项卡的左侧

问题描述

1 个解决方案

解决方案1
0 2020-10-23 07:56:12

Bootstrap 导航栏使用角度路线故障到特定活动选项卡的左侧

问题描述

1 个解决方案

解决方案1 0 2020-10-23 07:56:12

解决方案1
0 2020-10-23 07:56:12