Question

我正在为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>

Answer 1

具有该网格模板css属性的内容。尝试对CSS使用这些更改：


body{
  top:0px;
  display:grid;
/*   grid-template-areas: "nav main"; */          
/*   grid-template-columns:20vw 80vw; */
  margin:0;
 
  
}
#main-doc{
/*   added this */
  position:relative;
  left:20%;
  width:80%;
  
  grid-area:main;
  margin:0px;
  top:0px;
  padding-left:10px;
  
}

.main-section{
  padding:10px;
}

#navbar{
  grid-area:nav;
  position:fixed;
  border-right:solid;
  text-align:left;
  width:20%;
}
  .nav-link{
  display:block;
  border-top:solid;
  border-color:grey;
  color:#5F5C5B;
  padding:12px;
  text-decoration:none;
  z-index:100;

}
#nav-header{
  font-size:24px;
  font-weight:bold;
  height:50px;
  padding:5px;
  
}


header{
  font-size:24px;

  
}
.main-section{
  width:100;
}
code{
  display:block;
  background-color:#EAE5E3;
    padding:10px;
  max-width:100%;
 
}
p,li{
  padding:10px;
  
}

Answer 2

是您的汉堡菜单（freecodecamp脚本）导致无法单击链接。为了进行测试，我调整了导航栏CSS（左边距：300像素；），只需将导航栏移到远离汉堡图标的右侧（单击时），以便为弹出窗口留出足够的空间，然后可以单击链接。您需要做的是更改汉堡菜单或导航栏的位置。

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

为什么我的锚链接跳到特定部分无效？

2 个答案: