0

我正在玩一个简单的网站（我是 HTML 和 CSS 的初学者），在那里我制作了一个带有一些子菜单的简单菜单。页面的内容，主要是图像和视频，将显示在一个滚动框中。

现在我认为与其创建不同的子页面，还不如能够跳转到相关内容。我尝试了不同的解决方案，但有些东西没有解决——或者至少，jsfiddle 没有显示出来。

    <div id="navigation">
    <ul>        
      <li>
        <a href="#">main menu</a>
            <ul>

                  <li><a href="#section1">section 1</a></li>
                  <li><a href="#section2">section 2</a></li>
                  <li><a href="#section3">section 3</a></li>
            </ul>
        </li>  
    </ul>   
</div>

这是我菜单一部分的代码，这是带有图像的滚动框：

    <div class="scroll" style="float:left;border: 1px solid black; width: 40em; 
     height:  30em; line-height: 3em; overflow-y: scroll; overflow-x:hidden; 
     text-align: center; margin:5%; margin-bottom: 5%; background-color: #ffffff; 
     color: #ffffff;">

     <img src="http://websiteurl.com/image.jpg" style="float: left; width: 95%; 
      padding: 3%; padding-right: 3%; display: block" alt="image1"> 
     <a name="section1"><img src="http://websiteurl.com/image2.jpg"
     style="float: left; width: 95%; padding: 3%; padding-right: 3%; alt="image2"></a></div>

如您所见，我想单击菜单链接“第 1 节”，以便在不更改页面本身的情况下将滚动框向下跳转到所需的图像位置。

这怎么可能？或者：锚定的错误在哪里？谢谢大家的回答！

4

1 回答 1

2

使用内联 css 很难阅读代码。我首先建议将 css 移动到样式表，这肯定会有助于可读性和调试。

您是否在没有图像或没有滚动框的情况下进行了测试？

锚标签通常只是

<a href="#myAnchorName">Click Here</a>

或者如果使用图像而不是链接

<a href="#myAnchorImage"><img scr="imageLocation"/></a>

然后锚部分是

<a name="myAnchorName"></a>
于 2013-07-11T14:27:15.830 回答