时间戳

首页 > 解决方案 > 为什么我的锚链接不能跳转到特定部分？

html - 为什么我的锚链接不能跳转到特定部分？

问题描述

我正在为 FCC 做一个技术文档项目，我应该能够单击导航栏上的任何链接并跳转到相应的部分，但由于某种原因它不起作用。以下是代码片段。

要检查 Codepen：https ://codepen.io/andres146-the-selector/pen/abZKaXq

'''
         <nav id="navbar">
        <header id="nav-header"> JScript Documentation</header>
          <a class="nav-link" href="#Introduction">Introduction</a>
          <a class="nav-link" href="#What_you_should_already_know">What you should already 
           know</a>
          <a class="nav-link" href="#JAJ">Java and Javascript</a>
          <a class="nav-link" href="#HelloWorld">Hello World</a>
          <a class="nav-link" href="#Variables">Variables</a>
          <a class="nav-link" href="#DV">Declaring Variables</a>
          <a class="nav-link" href="#VS">Variable Scope</a>
          <a class="nav-link" href="#GV">Global Variables</a>
          <a class="nav-link" href="#Constants">Constants</a>
          <a class="nav-link" href="#DT">Data Types</a>
          <a class="nav-link" href="#IfElse">If...Else Statements</a>
          <a class="nav-link" href="#While">While</a>
          <a class="nav-link" href="#FS">Function Declarations</a>
          <a class="nav-link" href="#Reference">Reference</a>
          </nav>
         ,,,




     <section class="main-section" id="Introduction">
    <header> Introduction</header>
      <p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and 
   lightweight language. Inside a host environment (for example, a web browser), JavaScript can 
   be connected to the objects of its environment to provide programmatic control over them.

JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
      <ul>
        <li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
        <li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
        </ul>
    
  </section>
    
    
    
    
  <section class="main-section" id="What_you_should_already_know">
    <header >What You Should Already Know</header>
        <p>This guide assumes you have the following basic background:</p>
          <ul>
        
            <li>A general understanding of the Internet and the World Wide Web (WWW).</li>
            <li>Good working knowledge of HyperText Markup Language (HTML).</li>
            <li>Some programming experience. If you are new to programming, try one of the 
                tutorials 
            linked on the main page about JavaScript.</li>
          </ul>

标签： htmlcss

解决方案

是您的汉堡菜单（freecodecamp 脚本）导致无法点击链接。为了测试它，我调整了你的导航栏 CSS (margin-left: 300px;)，只需将你的导航栏移动到远离汉堡图标的右侧（点击时），为弹出窗口留出足够的空间，然后链接就可以点击了. 您需要做的是更改汉堡菜单或导航栏的位置。

    #navbar{
  grid-area:nav;
  position: fixed;
  border-right:solid;
  text-align:left;
  margin-left: 300px; 
  width:20%;

推荐阅读