使导航栏转到正确的部分答案

【问题标题】：Making a navbar go to the correct section使导航栏转到正确的部分
【发布时间】：2022-01-07 00:24:59
【问题描述】：

我是代码初学者。我试图让我的导航栏转到我的 HTML 页面的正确部分。例如，我希望我的技能 href 转到 html 的技能部分。我知道我遗漏了一些东西，但我不知道它是什么。非常感谢您的帮助！

这是我的导航栏代码

<div class="Navbar" style="position: inherit;">
        <a class="active" href="#aboutme">About Me</a>
        <a class="active" href="#skills">Skills</a>
        <a class="active" href="#contactme">Contact Me</a>
</div>

这是我的#skills 部分的代码。所有部分都有相同的编码。

<div class="skills">
        <h2 class="header">Skills</h2>
            <div class="skills-img">
            <img src="HTML.png" alt="html" width="100px">
            <img src="Css.png" alt="css" width="75px">
          <img src="JavaScript-Logo.png" alt="Javascrip" width="180px">
            </div>

【问题讨论】：

“正确的部分”是什么意思？
基本上我是导航栏上的技能 Href 以转到我的 html 的技能部分
如果我理解正确，如果您将class="skills" 更改为id="skills"，它应该可以工作

标签： html css xcode navbar

【解决方案1】：

你必须使用 id 属性。

例子：

<div id="skills">
    <h2 class="header">Skills</h2>
    <div class="skills-img">
        <img src="HTML.png" alt="html" width="100px">
        <img src="Css.png" alt="css" width="75px">
        <img src="JavaScript-Logo.png" alt="Javascrip" width="180px">
    </div>
</div>

我想这会对你有所帮助：https://www.w3docs.com/snippets/html/how-to-create-an-anchor-link-to-jump-to-a-specific-part-of-a-page.html

【讨论】：

谢谢！成功了！

【解决方案2】：

#skills,#contactme,#aboutme{
margin-top:100vh;
}

#skills a, #contactme a, #aboutme a{
text-decoration:none;
}
  
a{
margin-left:20px;
margin-right:20px;
text-align:center;}

.Navbar{
display:flex;
justify-content:center;

}

<div id='Navbar' class="Navbar" >
        <a class="active" href="#aboutme">About Me</a>
        <a class="active" href="#skills">Skills</a>
        <a class="active" href="#contactme">Contact Me</a>
</div> 


<div id='skills' class="skills">
        <h2 class="header"><a href='#Navbar'>Skills</a></h2>
            <div class="skills-img">
            
            </div>
</div>

<div id='aboutme' class="skills">
        <h2 class="header"><a href='#Navbar'>About Me</a></h2>
            <div class="skills-img">
            
            </div>
</div>


<div id='contactme' class="skills">
        <h2 class="header"><a href='#Navbar'>Contact Me</a></h2>
            <div class="skills-img">
            
            </div>
</div>

【讨论】：

请考虑解释为什么这个答案有效。对于初学者来说，一个简短的句子可能有助于理解代码以及错误的地方。
我会解释-这是有效的，因为 href 知道点击时要去哪里 #skills 。最初，您将课程技能设置为#skills。所以href 不知道去哪里，因为#skills 不存在
@DCR 你应该总是解释你的答案，而不仅仅是给出代码

【解决方案3】：

另一种选择是添加一个a标签，带有name属性，将其设置为您希望链接跳转的网页中的唯一名称，这称为片段标识符（参见第7章：https://tools.ietf.org/html/rfc1866），作为初学者，我建议开始学习标准，而不仅仅是在线教程......

【讨论】：