堆栈内存溢出
  简体   繁体   English

锚定到隐藏div中的元素

[英]Anchor to element within hidden div

 原文  2017-02-21 12:59:51  6   2    javascript/ jquery/ html/ anchor/ hidden

问题描述

I'm trying to make a href link to an anchor on another page (let's call it page 2 to make it easier), however on page 2, the anchor in question is contained within a div that is originally hidden when you first visit it (The div expands to reveal the content when header is clicked. So of course by default, the div has the property 'display:none'). 我正在尝试在另一个页面上创建一个到一个锚点的href链接（让我们将它称为第2页以使其更容易），但是在第2页，有问题的锚点包含在最初在首次访问时隐藏的div中（div会在单击标题时展开以显示内容。因此，默认情况下，div具有属性'display：none'）。

Here's a small sample of the exact kind of thing I'm talking about. 这是我正在谈论的确切事物的一小部分样本。 

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> p {color:#000;} </style> <script> $(document).ready(function(){ $("#f-hdr").click(function(){ $("#hidden").toggle(1000); }); }); </script> </head> <body> <a href="#anch">Link to anchor within hidden div</a> <h2><a id="f-hdr" href="javascript:void(0)">Div Header</a></h2> <div id="hidden" style="display:none"> <p id="anch">some text</p> </div> </body> </html>

Thank you! 谢谢！

EDIT - For instance, say if I was on 'page 1', I want to be able to open a link to the specific element on 'page 2' (in this case, #anch) But '#anch' is contained in a div (#hidden) which is hidden when the page is first opened. 编辑 - 例如，如果我在'第1页'，我希望能够在'第2页'（在这种情况下，＃anch）打开指向特定元素的链接但是'#anch'包含在div（#hidden）在首次打开页面时隐藏。 Originally, to access the content in '#hidden', the user must click the heading, which expands the div to reveal the content. 最初，要访问“#hidden”中的内容，用户必须单击标题，该标题会扩展div以显示内容。 I would like to be able to click the link to '#anch' (which takes me to 'page 2') and view the content in '#anch' without clicking the heading first. 我希望能够点击“#anch”链接（将我带到“第2页”）并查看“#anch”中的内容，而不先点击标题。

From what I have seen, it may have something to do with the 'onhashchange' event. 从我所看到的，它可能与'onhashchange'事件有关。 Although I'm not too sure (hence the post) :) 虽然我不太确定（因此帖子）:)

2 个解决方案

解决方案1
 0  2017-02-21 13:12:32

The solution is that you need to use visibility: hidden instead of display: none . 解决方案是您需要使用visibility: hidden而不是display: none 。

I mean you need to change this: 我的意思是你需要改变这个： 

<div id="hidden" style="display:none">
   <p id="anch">some text</p>
</div>

By this: 这样： 

<div id="hidden" style="visibility: hidden">
   <p id="anch">some text</p>
</div>

For more information you can check this question What is the difference between visibility:hidden and display:none? 有关更多信息，您可以查看此问题可见性：隐藏和显示：无之间有什么区别？

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). display：none表示相关标签根本不会出现在页面上 （尽管您仍然可以通过dom与它进行交互）。 There will be no space allocated for it between the other tags. 其他标签之间不会为其分配空间。

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page . visibility：hidden表示与display：none不同，标记不可见， 但在页面上为其分配了空间 。 The tag is rendered, it just isn't seen on the page. 标记已呈现，它只是在页面上看不到。

I'm posting the update with a long text added to it to see how it goes to the hidden element when you click on "Link to anchor within hidden div" : 我发布了一个添加了长文本的更新，以查看当您点击“链接到隐藏div中的锚点”时它是如何进入隐藏元素的： 

 $(document).ready(function(){ $("#f-hdr").click(function(){ $("#hidden").toggle(1000); }); }); 
 p {color:#000;} 
 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <a href="#anch">Link to anchor within hidden div</a> <h2><a id="f-hdr" href="javascript:void(0)">Div Header</a></h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> <div id="hidden" style="visibility: hidden"> <p id="anch">some text</p> </div>

解决方案2
 0 已采纳  2017-02-21 14:55:59

There are two ways of accomplishing this one using the name anchor attribute as suggested by W3schools. 根据W3schools的建议，使用名称锚属性有两种方法可以完成这个。

W3schools: https://www.w3schools.com/tags/att_a_name.asp W3schools： https ：//www.w3schools.com/tags/att_a_name.asp

And another approach could be to use generic jquery method which behaves like name anchor. 另一种方法可能是使用泛型jquery方法，其行为类似于名称锚。

HTML: HTML： 

<a class="nameLink" href="#hidden" >Link to anchor within hidden div</a>

<h2><a id="f-hdr" href="javascript:void(0)">Div Header</a></h2>
<p class="dummy-height"></p>
<div id="hidden" >
  <p id="anch">some text</p>
</div>

JQuery: JQuery的： 

$(document).ready(function(){
    $("#f-hdr").click(function(){
        $("#hidden").toggle(1000);
    });
    $(".nameLink").on('click', function(){
                $($(this).attr('href')).show(); 
    })
});

Note: Here nameLink is the class which can be assigned to any anchor link for using same functionlity. 注意：这里nameLink是可以分配给任何锚链接以使用相同功能的类。

Finally the link: 最后链接：

https://jsfiddle.net/Ashokkumargupta/bc1drx0s/ https://jsfiddle.net/Ashokkumargupta/bc1drx0s/

Hope this solves your problem. 希望这能解决你的问题。

Thanks, Ashok 谢谢，阿肖克

暂无
暂无

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

相关问题 显示隐藏的div并平滑滚动到隐藏div内的锚点 - show hidden div and smoothly scroll to anchor point within hidden div 在锚点内选择div - Selecting div within anchor 如何在溢出隐藏div内滚动到某个当前不可见的元素？ - How to scroll within an overflow hidden div to a certain currently invisible element? 如何在PHP代码中使用Javascript在没有href的锚点onclick上显示隐藏的div？ - How to display hidden div on anchor onclick with no href using Javascript within PHP code? 隐藏元素中的元素未隐藏 - elements within a hidden element are not hidden 在加载时，跳转到div中的锚点 - On load, jump to anchor within a div 如何使用#anchor从URL打开隐藏的div - How to open a hidden div from url with #anchor 单击按钮时隐藏锚div - Anchor hidden div when button is clicked 锚链接到隐藏div中的内容 - Anchor link to content inside hidden div 如何将锚元素附加到div？ - How to append anchor element to div?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM