时间戳

首页 > 解决方案 > 作品集页面用户故事 7. 导航栏应包含至少一个链接，我可以单击该链接导航到页面的不同部分

html - 作品集页面用户故事 7. 导航栏应包含至少一个链接，我可以单击该链接导航到页面的不同部分

问题描述

无法通过单击我的导航链接导航到我的投资组合页面的不同部分。当我点击它们时，有时甚至会遇到错误 502。

我试图通过检查 a 标签中 href 属性的引用 ID 来诊断问题，并检查 section 标签是否属于父元素，但无济于事。

<div id="nav-welcome">
    <div id="nav-box">
        <nav id="navbar">
              <a href id="#welcome-section">Home</a>
              <a href id="#projects">Projects</a>
              <a href id="#contact">Contact</a>
        </nav>
    </div>
</div>

<section id="welcome-section">
    <h1>Hello I am Gerwyn.</h1>
    <p>A Student invested in Web Development!</p>
</section>

当我单击 id 为“#welcome-section”的链接时，我希望导航到 id="welcome-section" 的部分

标签： htmlcss

解决方案

锚标签（a元素）需要一个href属性来设置点击时的去向。但是您错误地设置了目的地id！您应该将a元素修改为：<a href="#welcome-section">

试试这个方法：

#navbar a {
    text-decoration:none;
    font-size: 1.5em;
    margin: 20px;
    padding: 8px;
    border: 2px #590199 solid;
    border-radius: 8px;
}

.spacer {height:300px; margin-top: 30px;}
<p>&nbsp;</p>

<div id="nav-welcome">
	<div id="nav-box">
	<nav id="navbar">
	  <a href="#welcome-section">Home</a>
		<a href="#projects">Projects</a>
		<a href="#contact">Contact</a>
	</nav>
	</div>
	</div>

<div class="spacer">some content ...</div>

	<section id="welcome-section">
	  <h1>Hello I am Gerwyn.</h1>
	  <p>A Student invested in Web Development!</p>
	</section>

<div class="spacer">some content ...</div>

	<section id="projects">
	  <h1>My Projects...</h1>
	</section>

<div class="spacer">some content ...</div>

	<section id="contact">
	  <h1>My Contact...</h1>
	</section>

推荐阅读