简体   繁体   English

如何在使用锚点的情况下嵌套到特定部分?

[英]How to jump to a specific section, while nested, with an anchor?

I have a website that I've been working on and I wanted to solve a problem that I have not stumbled upon before. 我有一个网站,我一直在努力,我想解决一个我以前没有偶然发现的问题。 It has to do with anchors and nested sections. 它与锚点和嵌套部分有关。

So the code looks like this: 所以代码看起来像这样:

<html>
    <head></head>
    <body>
        <section id="sections"> <!-- FAILS the jumping -->
            <section id="abo0">
            </section>
            <section id="abo1">
            </section>
        </section>
    </body>
</html>

Now with the browser I can just jump between the different section-tags by an anchor like href="?#abo0". 现在使用浏览器,我可以通过像href =“?#abo0”之类的锚点在不同的section-tags之间跳转。 IF the parent section-tag (id="sections") is not in the code. 如果父节 - 标签(id =“节”)不在代码中。 What in the browser fails by using nested sections? 使用嵌套部分在浏览器中失败了什么?

I've tried things like "?#sections#abo0" but nothing seem to work, other than to remove the parent section-tag. 我尝试过“?#sections#abo0”之类的东西,但似乎没有什么工作,除了删除父节标记。

Any idea on how to solve this weird problem? 有关如何解决这个奇怪问题的任何想法? I really need to have this nested section setup as the headings will be incorrect otherwise, in the way my website currently is designed. 我真的需要这个嵌套部分设置,因为标题将是不正确的,否则,就像我的网站目前的设计方式。

Thank you! 谢谢! Kind regards goldenmaza 亲切的问候goldenmaza

Remove the section with id section and use this to scroll 删除带有id section并使用此section滚动

http://yourwebsite.com/page.html#abo1

Your html code 你的HTML代码

<html>
<head></head>
<body>

        <section id="abo0" style="height:2000px">sd
        </section>
        <section id="abo1" style="height:2000px">
            asdf
        </section>

</body>

I can't see how it is used and fails as not all code is available, so here is a first sample showing how you could/should use it. 由于并非所有代码都可用,我无法看到它是如何使用和失败的,所以这是第一个展示如何/应该使用它的示例。

Leave a comment if I missed something and I'll adjust my solution. 如果我错过了某些内容,请发表评论,我会调整我的解决方案。

 #abo0, #abo1 { height: 500px; border: 1px solid gray; margin: 10px; } 
 <a href="#abo0">Link 0</a> <a href="#abo1">Link 1</a> <section id="sections"> <section id="abo0"> Text 0 <br><a href="#abo1">Link 1</a> <br><a href="#">Back to top</a> </section> <section id="abo1"> Text 1 <br><a href="#abo0">Link 0</a> <br><a href="#">Back to top</a> </section> </section> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM