0

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

http://violetoeuvre.com/

当点击顶部的写作链接时，我希望页面跳转到写作部分，联系同样的事情，类似于这样：

http://jsfiddle.net/4ygcf/

但是，当我加入适当的 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，这种技术是否不起作用？

谢谢。

4

2 回答 2

1

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

.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>
于 2013-04-16T15:21:15.717 回答
1

“写作”链接：

home_writing当前是一个类，将其更改为一个 id <div id="home_writing">，它将起作用

“关于”链接：

您已将链接设置为<a href="home_text"...而不是<a href="#home_text"，坚持下去#，这也应该有效

“联系方式”链接：

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

于 2013-04-16T15:21:15.977 回答