锚标记似乎链接到标识正常，但不工作

我一直无法弄清楚为什么会发生这种情况，我的导航栏工作正常，锚链接本身就是实际的链接，但是当我点击页面时要么重新加载，要么完全变成白色屏幕。锚标记似乎链接到标识正常，但不工作

这里到页面的链接，只包括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>

来源

2017-01-03 Doodles

你缺少'href'和锚点名称之间的'='。应该是'href =“＃home”' –

花了我2天无处可去，在4分钟内解决了，非常感谢你 – Doodles

你缺少=标志<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>

来源

2017-01-03 03:34:26

锚标记似乎链接到标识正常，但不工作

回答

相关问题