blocks|key|857813|text|看一看：小提琴|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|857814|您根本不需要使用<a>元素，您可以为区段块分配唯一的id。|style|CODE|857815|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/XueyX/18/^0|4|3|0|0|8|3|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@$A|U|B|V|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|W|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

Take a look: <a href="http://jsfiddle.net/XueyX/18/" rel="nofollow">jsfiddle</a>

You don't need to use <code>&lt;a&gt;</code> element at all, you can assign unique id to your section block.

blocks|key|857726|text|没有正确关闭标记。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|857727|例如：，|857728|错误|offset|length|style|BOLD|857729|This+EPUB+eBook+is+released+under+a+Creative+Commons+(BY-NC-ND/3.0)+Licence.
++++++++Source+text+and+images+taken+from+the+Public+Domain.|code-block|syntax|javascript|857730|校正|857731|This+EPUB+eBook+is+released+under+a+Creative+Commons+(BY-NC-ND/3.0)+Licence.
++++++++Source+text+and+images+taken+from+the+Public+Domain.|857732|entityMap^0|0|0|0|2|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@$F|X|G|Y|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|10|8|@$F|11|G|12|H|I]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

You are not closed the tags correctly

For eg:,

Wrong

<pre><code>&lt;p&gt;This EPUB eBook is released under a Creative Commons (BY-NC-ND/3.0) Licence.
 &lt;p&gt;Source text and images taken from the Public Domain.&lt;/p&gt;
</code></pre>

Correct

<pre><code>&lt;p&gt;This EPUB eBook is released under a Creative Commons (BY-NC-ND/3.0) Licence.
 Source text and images taken from the Public Domain.&lt;/p&gt;
</code></pre>

blocks|key|1731733|text|我可能读错了，但看起来你的标签可能没有正确地关闭，你有两个打开的p's，只有一个关闭。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1731734|它抛出的部分是在其中，这就是为什么你的锚被混淆。|1731735|JSFiddle似乎也不喜欢第3节上面的3div标签，但我还没有弄清楚原因。|1731736|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

I might be reading this wrong but it looks like your tags might not be closed properly
in section you have 2 open p's and only 1 close.

its throwing off wihch sections are in which and thats why your anchors are getting mixed up.

JSFiddle also doesn't seem to like the 3 div tags above section 3 but I havent figured out why, yet.

blocks|key|859329|text|这是因为<a>标记的位置。你应该把它放在你感兴趣的标签之后。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|859330|那么，你应该整理你的标记一点。每个人都知道艾琳·阿德勒被有效的网页所吸引。|859331|entityMap|0|LINK|mutability|MUTABLE|url|http://validator.w3.org/^0|4|3|P|3|0|6|6|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

This is because of the location of the <code>&lt;a&gt;</code> tag. You should put it right after the <code>&lt;p&gt;</code> tag you're interested in.

And well, you should <a href="http://validator.w3.org" rel="nofollow">tidy up your markup</a> a bit. Everyone knows Irene Adler is attracted by valid webpages.

blocks|key|859376|text|这是jsFiddle示例中标记的屏幕截图：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|859377|​|859378|📷|atomic|offset|length|859379|859380|如您所见，有多个名称为"section1“、"section2”等名称的section1。这将阻止您的#sectionX散列找到唯一的锚点。|859381|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/9b59fd9c1c55eea691e739f238a9697e.png|imageAlt^0|0|0|0|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@$G|X|H|Y|1|Z]]|A|$]]|$1|I|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S|T|-4]]]]

This is a screenshot of the markup in your jsFiddle example:

<img src="https://i.stack.imgur.com/sBhrO.png" alt="enter image description here">

As you can see, there are multiple <code>&lt;a&gt;</code>'s with name value "section1", "section2" etc. This will prevent your #sectionX hash to find a unique anchor.

I have a HTML file with many <code>&lt;div&gt;</code> elements and I cannot navigate to anchor tags using JavaScript. I have put a demo in jsfiddle. Please see the link for JavaScript + CSS + HTML for details.

I can navigate to the "section5" but not to other sections.

<a href="http://jsfiddle.net/funcubes/XueyX/7" rel="nofollow">jsfiddle demo</a>

Can anyone help me with this?

Any help would be really appreciated....

Kind regards

Update : Thanks for the response. I have updated the link with cleaned up HTML. The javascript navigation still doesn't work :(

Update 2: Thanks for the suggestions, but still not working 
I updated it with your suggestions.. but it doesn't work. If I take out the css entry "div.columnbreak { -webkit-column-break-after: always; the navigation works. When I put that back the navigation doesn't work*

navigating to anchors in div element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个包含许多<div>元素的HTML文件，我无法使用JavaScript导航到定位标记。我在小提琴里放了一个演示。有关详细信息，请参阅JavaScript + CSS + HTML的链接。我可以导航到"section5“，但不能导航到其他部分。有人能帮我吗？任何帮助都是非常感谢的..。亲切的问候更新:感谢您的响应。我已经更新了与清理HTML链接。javascript导航仍然无法工作:(更新2:

问导航到div元素中的锚
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航到div元素中的锚EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航到div元素中的锚
EN