Question

点击链接后，我正在尝试移动到页面上的特定位置。这是我的网站：

我希望页面在单击顶部书写链接时跳转到写入部分，并且与联系人相同，类似于：

但是，当我使用适当的ID时，它不起作用。这是我的HTML：

<div class="wrapper_nav_box">
    <div id="nav_menu" id="nav_box_1"><a href="#home_writing">WRITING  |</a></div>

和css：

.side_nav_contact {
        display:block;
        float:left;
        background:rgba(100,255,255,0);
        margin-top: 840px;
        width:200px;
        height: 50px;
}

#nav_box_l {
    display: block;
    float:left;
    width:247px;
    text-align: right;
    padding-top: 169px;
    margin-top: 0;
}


#nav_menu a:link{
        font-family: 'Playfair Display', serif;
        font-size: 30px;
        font-weight: 100; 
        color:rgba (255,255,255,1);
        text-decoration: none; 
        text-align: center;
        letter-spacing:0.2em;
}

#nav_menu a:hover{
        font-family: 'Playfair Display', sans-serif;
        font-size: 30px;
        font-style: italic;
        font-weight: 100; 
        color:rgba (255,255,255,1);
        text-decoration: none; 
        text-align: center;
        letter-spacing:0.2em;
}

我怀疑这是因为我使用了两个ID（#nav_box_l和#nav_menu）。 #nav_menu是我为链接设置样式的方式，而#nav_box_l包含“Writing”。我尝试过组合，但这不起作用。我应该只使用一个吗？如果我想跳到一个类（.side_nav_content）而不是id，这种技术不起作用吗？

感谢。

Answer 1

HTML元素可能只有一个id，只有一个元素可能包含id。您可以使用class作为样式。

.nav_box_l {
  display: block;
  float:left;
  width:247px;
  text-align: right;
  padding-top: 169px;
  margin-top: 0;
}

<div id="nav_menu" class="nav_box_1">...</div>

Answer 2

“写作”链接：

home_writing目前是一个类，将其更改为标识<div id="home_writing">并且可以使用

“关于”链接：

您已将链接设置为<a href="home_text"...而不是<a href="#home_text"，将#添加到其中，这也应该有用

“联系”链接：

您没有名为#contact的div，这是您要链接到的内容，将<div class="home_contact">更改为<div id="contact">并且该内容也应该正常工作

滚动到页面上的某个位置

2 个答案: