锚标签看似正确链接到 id 但无法正常工作答案

【问题标题】：Anchor tags seemingly linked to ids properly but not working锚标签看似正确链接到 id 但无法正常工作
【发布时间】：2017-01-03 03:17:12
【问题描述】：

我无法弄清楚为什么会发生这种情况，我的导航栏工作正常，锚链接本身就是实际链接，但是当我点击它们时，页面要么重新加载，要么完全白屏。

这里是页面的链接，只包含了 ul 本身和附加的 css

http://s.codepen.io/boomerang/7e523d9a7efa11d1199da37a32c176ac1483413552850/index.html

.menu {
  position: fixed;
  z-index: 999;
  left: 50%;
  transform: translate(-50%, 0);
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3f2e38;
  border-radius: 0px 0px 30px 30px;
  box-shadow: 0px 2px 4px #3f2e38;
}
ul.menu li a {
  width: 100px;
  height: 40px;
  font-family: dosis;
  display: inline-block;
  color: #e6e1ea;
  text-align: center;
  transition: .3s;
  font-size: 20px;
}
ul.menu li {
  float: left;
}
ul.menu li a:hover {
  background-color: #59404f;
}
/*header text*/

.texttwo {
  font-family: dosis;
  font-size: 72px;
}

<header>
  <nav>
    <ul class="menu">
      <li><a href "#home">Home</a>
      </li>
      <li><a href "#gallery">Gallery</a>
      </li>
      <li><a href "#portfolio">Portfolio</a>
      </li>
      <li><a href "#contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>

<div>
  <h1 class="texttwo" id="gallery">Gallery</h1>
</div>

<div>
  <h1 class="texttwo" id="portfolio">Portfolio</h1>
</div>

<div>
  <h1 class="texttwo" id="contact">Contact</h1>
</div>

【问题讨论】：

您在href 和锚点名称之间缺少=。应该是href="#home"
花了我 2 天的时间一无所获，在 4 分钟内解决，非常感谢

标签： html html-lists anchor href nav

【解决方案1】：

你不见了=签到<a href="#"></a>

.menu {
  position: fixed;
  z-index: 999;
  left: 50%;
  transform: translate(-50%, 0);
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3f2e38;
  border-radius: 0px 0px 30px 30px;
  box-shadow: 0px 2px 4px #3f2e38;
}
ul.menu li a {
  width: 100px;
  height: 40px;
  font-family: dosis;
  display: inline-block;
  color: #e6e1ea;
  text-align: center;
  transition: .3s;
  font-size: 20px;
}
ul.menu li {
  float: left;
}
ul.menu li a:hover {
  background-color: #59404f;
}
/*header text*/

.texttwo {
  font-family: dosis;
  font-size: 72px;
}

<header>
  <nav>
    <ul class="menu">
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#gallery">Gallery</a>
      </li>
      <li><a href="#portfolio">Portfolio</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>

<div>
  <h1 class="texttwo" id="gallery">Gallery</h1>
</div>

<div>
  <h1 class="texttwo" id="portfolio">Portfolio</h1>
</div>

<div>
  <h1 class="texttwo" id="contact">Contact</h1>
</div>

【讨论】：