Question

我制作了一个包含4个元素的导航栏（HOME，ABOUT，PROJECTS，CONTACT）。每个元素都是带有自身ID的锚标记。我希望通过单击元素分别进入“部分”，但是我不希望自己的网址是 #about 或 #contact

这是我的代码：

<ul>
      <li>
           <a href="/">Home</a>
      </li>

      <li>
            <a href="#about">About</a>
       </li>

       <li>
            <a href="#services">Services</a>
       </li>

       <li>
           <a href="#contact">Contact</a>
       </li>

 </ul>

Answer 1

您不能在纯HTML中执行此操作，但是可以在Javascript中实现类似的功能。

类似这样的操作只是将各部分滚动到视图中：

<ul>
      <li>
           <a href="/">Home</a>
      </li>

      <li>
            <a onclick="document.getElementById('about').scrollIntoView()">About</a>
       </li>

       <li>
            <a onclick="document.getElementById('services').scrollIntoView()">Services</a>
       </li>

       <li>
           <a onclick="document.getElementById('contact').scrollIntoView()">Contact</a>
       </li>

 </ul>

或者最好定义一个可以像这样快速调用的函数：

<ul>
      <li>
           <a href="/">Home</a>
      </li>

      <li>
            <a onclick="scrollforme('about')">About</a>
       </li>

       <li>
            <a onclick="scrollforme('services')">Services</a>
       </li>

       <li>
           <a onclick="scrollforme('contact')">Contact</a>
       </li>

 </ul>

    
<script>
function scrollforme(sectionid){
    document.getElementById(sectionid).scrollIntoView();
}
</script>

导航栏元素

1 个答案: