Image 页面跳转到图像
我正在玩一个简单的网站(我是HTML和CSS的初学者),在那里我制作了一个带有一些子菜单的简单菜单。页面内容(主要是图像和视频)将显示在滚动框中 现在我想,与其创建不同的子页面,不如跳转到相关内容。我尝试了不同的解决方案,但有些问题没有解决——或者至少,JSFIDLE没有显示出来Image 页面跳转到图像,image,anchor,page-jump,Image,Anchor,Page Jump,我正在玩一个简单的网站(我是HTML和CSS的初学者),在那里我制作了一个带有一些子菜单的简单菜单。页面内容(主要是图像和视频)将显示在滚动框中 现在我想,与其创建不同的子页面,不如跳转到相关内容。我尝试了不同的解决方案,但有些问题没有解决——或者至少,JSFIDLE没有显示出来 <div id="navigation"> <ul> <li> <a href="#">main menu&l
<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>
如您所见,我希望单击菜单链接“section 1”使滚动框跳到所需的图像位置,而不改变页面本身
那怎么可能呢?或者:锚定的错误在哪里?谢谢大家的回答 使用内联css阅读代码很困难。我首先建议将css移到样式表中,这肯定有助于可读性和调试 您是否在没有图像或滚动框的情况下进行了测试 锚定标签通常只是
<a href="#myAnchorName">Click Here</a>
或者如果使用图像而不是链接
<a href="#myAnchorImage"><img scr="imageLocation"/></a>
然后锚定部分是
<a name="myAnchorName"></a>
ah,感谢您提供的可读性提示!好的,我现在就去。至于锚定标签-确切地说,这就是我所尝试的。但是,它只是跳转到scrollbox中的第一个图像(我已经尝试过了,但没有使用该框,结果是一样的)。我不知道它为什么不往下跳。这里有一个JS小提琴,它有一个丑陋但有效的从上到下的弹跳例子。刚意识到我把CSS放在窗口里了,但它没有被使用。对不起,我没有太多时间。无论如何,谢谢你给我时间!我觉得你有点太快了,它似乎是空的:)一个更好的小提琴显示它在你的滚动框内的3个图像之间移动。谢谢你,史蒂夫,这是一个伟大的挑战!奇怪的是,我认为在图像的样式上有一些缺陷。一旦我应用了样式规则(通过html或css),跳转就不起作用了——这就是阻止跳转的原因,现在我必须弄清楚这一点。