编辑：

Question

我有这个HTML：

<a href="#MyHash" class="menuItem dpt0">Option 1</a>

当我将鼠标悬停时，我可以阅读http://localhost/#MyHash

当我点击它时，浏览器中的网址为http://localhost/#/MyHash

为什么要添加斜杠？有解决方法吗？

我无法弄清楚......

额外：

它是使用AngularJS的.NET MVC网络解决方案，我不知道这是否相关

我看到了一些关于googlebot / SEO（URL fragments: a leading slash in your hash url - good or bad?）的话题：我不关心它，这不适用于公共网站。

编辑：

在JSFiddle中看到它：https://jsfiddle.net/y2nLaxh5/embedded/result/ 将绿色部分悬停在所提出的选项上（因为它在iframe中你应该在新标签中打开）

Edit2：

＆＃13;

(function () {
  var app = angular.module("myApp", []);

  app.controller("MenuController", ['$scope', function($scope) {
    $scope.items = [
      {
        name: "Option 1",
        url: 'MyUrl'
      },
      {
        name: "Option 2",
        url: 'MyUrl',
        items: [
          {
            name: "SubOption 2-1"
          }
        ]
      }
    ];

    function preprocessItems(items, depth) {
      depth = typeof(depth) === "undefined" ? 0 : depth;
      for (var i in items) {
        items[i].depth = depth;
        preprocessItems(items[i].items, depth + 1);
      }
    }
    preprocessItems($scope.items);
  }]);
})();

＆＃13;

body {
  font-size: .85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  color: #CCC;
  background-color: #333;
}

#background
{
  position: fixed;
  top: 15%;
  bottom: 15%;
  left: 15%;
  right: 15%;
}


#LeftMenu
{
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
}

#LeftMenu > .MenuContent
{
  position: absolute;
  width: 0;
  height: 100%;
  z-index:1;
}


#LeftMenu > .MenuContent > .MenuSlider
{
  background-color: #000;
  left: -200px;
  position: relative;
  width: 200px;
  height: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  transition: left 0.3s ease-out;
}

#LeftMenu:hover > .MenuContent > .MenuSlider
{
  left: 0;
}

.MenuSlider h3
{
  margin: 0 0 10px 0;
  text-align: center;
}

.MainIcon
{
  display: block;
  text-decoration: none;
  padding: 10px;
  border-radius: 0 0 5px 0;
  background-color: #1fa67a;
  width: 200px;
  height: auto;
  box-sizing: border-box;
  font-family: 'Nixie One';
  font-size: 2em;
  font-weight: bold;
  color: #FFF;
}
.MainIcon > p
{
  margin: 0;
}

.Activator
{
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

.ActivatorCirle
{
  position: absolute;
  height: 400px;
  top: -200px;
  width: 400px;
  left: -200px;
  border-radius: 100%;
}

.ActivatorColumn
{
  position: absolute;
  height: 100%;
  top: 0;
  width: 30px;
  left: 0;
}


.menuItem.dpt0 { font-size: 1.2em; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/ng-template" id="menuItem_renderer.html">
    <a href="#!{{item.url}}" class="menuItem dpt{{item.depth}}">{{item.name}}</a>
    <div ng-if="item.items">
        <div ng-repeat="item in item.items" ng-include="'menuItem_renderer.html'"></div>
  </div>
</script>
<body ng-app="myApp">
  <div id="background"></div>
  <div id="LeftMenu" ng-controller="MenuController as menu">
    <div class="Activator">
      <div class="ActivatorCirle"></div>
      <div class="ActivatorColumn"></div>
    </div>
    <div class="MenuContent">
      <a class="MainIcon" href="/">
        <p>Media<br />Content<br />Supervisor</p>
      </a>
      <div class="MenuSlider">
        <h3>MENU</h3>
        <div ng-repeat="item in items" ng-include="'menuItem_renderer.html'"></div>
      </div>
    </div>
  </div>
</body>

＆＃13;

浏览器在哈希片段中添加斜杠

额外：

编辑：

Edit2：

0 个答案: