Question

我试图在导航栏中提供指向不同网站的链接，但我被卡在这里。

<body>

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#beeryoga">Beer Yoga</a></li>
    <li><a href="#dayinmylife">A Day in My Life</a></li>
</ul>

这也是我的CSS样式表

ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden;background-color:lightslategray;}
li {float:left;}
li a {display:block;color:white;text-align:center;padding: 14px 16px;text-decoration:none;}
li a:hover {background-color: #111;}

Answer 1

将href更改为链接。例如：

<ul>
  <li><a class="active" href="https://stackoverflow.com/">Stack Overflow</a></li>
  <li><a href="another link">Beer Yoga</a></li>
  <li><a href="another link">A Day in My Life</a></li>
</ul>

如果将href改为https://stackoverflow.com/而不是#home，则链接会将您带到https://stackoverflow.com/

Answer 2

如果内部引用的是指向不同页面的不同链接，请确保您具有匹配的id选择器来链接到何处。例如：

这些定位标记将链接到您在另一页上设置的href的{{1}}值：

id

说这是beeryoga.html：

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="beeryoga.html#beeryoga">Beer Yoga</a></li>
    <li><a href="dayinmylife.html#dayinmylife">A Day in My Life</a></li>
</ul>

说这是dayinmylife.html：

<body>
    <div id="beeryoga">
        <p>We are linking here!</p>
    </div>
</body>

导航栏中的其他网站链接

2 个答案: