Question

我正在尝试修改我的projetc，它已经构建，因此每个页面上都有一个子菜单，但只编码一次。我希望能够为您当前正在查看的页面的链接添加突出显示，但我必须在一个html代码段中执行此操作该列表呈现正常，但我无法获取当前页面以突出显示。我已经阅读了一些关于在单独的文件中添加“当前链接”格式的其他帖子，但不幸的是，我必须在此片段中包含所有代码。我必须通过使用HTML，CSS和角度来做到这一点，我是新的学习角度

鉴于此，我正在努力实现这一目标，如果是，我该如何才能实现呢？

body {
  font-family: Source Sans Pro;
}

ul {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

a {
  float: left;
  width: 6em;
  text-decoration: none;
  padding: 0.2em 0.6em;
  border-right: 1px solid white;

}

#navbar li a.current {
  background-color: #FFF;
}

li {
  display: inline;
}

#bl {
  background-color: #5a5a5a;
  color: yellow;
}

#or {
  background-color: #5a5a5a;
  color: yellow;
}

#gr {
  background-color: #5a5a5a;
  color: yellow;
}

#bl:hover, #or:hover, #gr:hover {
  background-color: #ff6900;
}

.left {
  float: left;
}

<body ng-app="watch"> 
  <div ng-controller="control"> 
    <ul>
      <li><a href="#" ng-click = "person()" id="bl">Person</a></li>
      <li><a href="#" ng-click = "product()" id="or">Product</a></li>
      <li><a href="#" ng-click = "place()" id="gr">Place</a></li>
    </ul>
  </div>
</body>

我的控制器看起来像这个

'use strict';
var mymodule = angular.module("watch", []);

mymodule.controller("control",function($scope) {
    $scope.jsonerator = true;
    $scope.jsonerator2 = false;
	$scope.jsonerator3 = false;
	
	
    $scope.person = function() {
        $scope.jsonerator = true;
        $scope.jsonerator2 = false;
		$scope.jsonerator3 = false;
		
		 }
	
	
	 $scope.product = function() {
        $scope.jsonerator = false;
        $scope.jsonerator2 = true;
		$scope.jsonerator3 = false;
		
		}
	
	
	 $scope.place = function() {
        $scope.jsonerator = false;
        $scope.jsonerator2 = false;
		$scope.jsonerator3 = true;
		   }
};

这是我在jsfiddle上的菜单：jsfiddle

由于

Answer 1

除了将CSS ID更改为类（并且可能从标记中删除ID）之外，这是我的建议。您可能还会发现使用ng-class不需要太多代码;当冒号后的布尔语句为真时，它将应用该类。在这种情况下，我们使用你的jsonerator $ scope变量。

<li><a href="#" ng-click = "person()" id="bl" ng-class="{bl: jsonerator}">Person</a></li>
<li><a href="#" ng-click = "product()" id="or" ng-class="{or: jsonerator2}">Product</a></li>
<li><a href="#" ng-click = "place()" id="gr" ng-class="{gr: jsonerator3}">Place</a></li>

改变颜色当前链接页面角度＆amp; CSS

1 个答案: