Question

所以我刚刚开始创建自己的个人网站，但是，我的导航栏出现了问题。基本上我希望能够点击导航栏上的标题，然后它会引导我到我页面上与该标题相关的部分。使事情更清楚。举个例子，这是我到目前为止导航栏的内容：

<div class="about"> <a> About &nbsp; &nbsp; &nbsp;  </a> </div>
<div class="blog"> <a> Blog  &nbsp; &nbsp; &nbsp; </a> </div>
<div class="projects"> <a> Projects &nbsp; &nbsp; &nbsp </a> </div>

现在我的导航栏应该看起来像这样：关于博客项目我网页的其余部分看起来都喜欢这个

<h1> About me </h1>
<p> Hi im nikki.. </p>

<h2> Blog </h2>
<p> This is my blog.. </p>

<h3> Projects </h3>
<p> First project last year .... </p>

现在我想要做的就是点击导航栏上的“关于”并将其带到我页面上的“关于”部分？我该怎么做？

谢谢：）

Answer 1

尝试以下代码，将样式添加到样式表中。

    <style>
    .nav:after {
    content:"";
    clear:both;
    display:block;
    }
    .nav li {
     float: left;
     list-style-type: none;
     }
     </style>
     <ul class="nav">
       <li><a href="#about">About</a></li>
       <li><a href="#blog">Blog</a></li>
       <li><a href="#projects">Projects</a></li>
     </ul>
    <div id="about">
      Lorem Ipsum
    </div>
    <div id="blog">
      Lorem Ipsum
    </div>
    <div id="projects">
      Lorem Ipsum
    </div>

Answer 2

Jquery UI Tabs

你需要这样的东西吗？然后使用JQuery-UI选项卡轻松实现。

要知道更多关于它的知识，只需阅读文档，它很容易与普通的css＆amp; JS。

参考链接：https://jqueryui.com/tabs/

如何在导航栏上添加链接？ HTML

2 个答案: