javascript - 使用角度路线的引导导航栏在特定活动选项卡的左侧出现故障
问题描述
抱歉,如果这是一个愚蠢的问题,我是网页设计的初学者,即使在这里进行了大量的谷歌搜索/搜索,也找不到答案。
因此,正如您在标题中看到的那样,我的问题是,在我的导航栏中单击“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;
}
非常感谢您的帮助,因为我自己无法解决这个问题。谢谢
解决方案
已解决,问题出在我的 css 文件中,里面有一些乱码
推荐阅读
- bash - 如何在 AWS lambda 中安装和运行 acme.sh?
- sparql - SparQL:替换主题 URI
- amazon-web-services - 如何将 Spark 开发环境连接到 AWS Glue 终端节点
- javascript - 制作密码错觉的最简单方法是什么?
- c# - 在页面加载或提交按钮单击 asp.net core mvc 后保持在选项中选择的值
- c++ - 无法链接 ipopt 库(MacOS Mojave 上的 C++)
- python - 如何在 2 个不同的线程中运行 2 个不同的循环?
- mysql - Docker wordpress/mysql 因“连接被拒绝”而失败
- scala - scala-arm:Iterator[Int] 类型的表达式不符合预期的 ManagedResource[B_] 类型
- xodus - 安全关闭 Xodus 环境的正确方法是什么?