锚定到隐藏的div内的元素 [英] Anchor to element within hidden div
问题描述
我试图在另一个页面上创建一个锚链接的href链接（让我们将其称为页面2以使其更容易），但是在第2页中，所讨论的锚点包含在当您隐藏的div中首先访问它（div扩展以显示头部被点击时的内容，所以当然默认情况下，div的属性是'display：none'）。
以下是我正在谈论的确切类型的一小部分样本。
< 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 ）;点击（function（）{$（＃hidden）。toggle（1000）;}）;}）;< / script>< / head>< body>< a href = #anch>链接到隐藏div内的锚点< / a>< h2>< a id =f-hdrhref =javascript：void（0）> Div Header< / a& h2>< div id =hiddenstyle =display：none>< p id =anch>一些文字< / body>< / html>
谢谢！
编辑 - 例如，如果我是在'页面1'上，我想打开一个链接到'页面2'上的特定元素（在这种情况下，#anch），但是'#anch'包含在div（#hidden）该页面首先打开。最初，为了访问'#hidden'中的内容，用户必须单击标题，该标题展开div以显示内容。我希望能够点击链接到'#anch'（这会将我带到'page 2'），并在'#anch'中查看内容，而无需先点击标题。
从我看到的情况来看，这可能与'onhashchange'事件有关。虽然我不太确定（因此后）：）
有两种方法可以使用名称如W3schools所建议的锚点属性。
W3schools： https：// www .w3schools.com / tags / att_a_name.asp
另一种方法是使用通用jquery方法，其行为类似于名称锚。
HTML：
< a class =nameLink href =＃hidden>链接到隐藏div中的锚点< / a>
< h2>< a id =f-hdrhref =javascript：void（0）> Div Header< / a>< / h2>
< p class =dummy-height>< / p>
< div id =hidden>
< p id =anch>一些文字< / p>
< / div>
JQuery：
（$函数（）{
$（ （'。click'，function（）{
$（$（this））。toggle（1000）;
}）;
$（。nameLink）。 attr（'href'））。show（）;
}）
}）;
注意：这里 nameLink 是可以分配给任何锚的类链接使用相同的功能。
最后链接：
https://jsfiddle.net/Ashokkumargupta/bc1drx0s/
希望能够解决这个问题你的问题。
谢谢，
Ashok
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').
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. Originally, to access the content in '#hidden', the user must click the heading, which expands the div to reveal the content. 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.
From what I have seen, it may have something to do with the 'onhashchange' event. Although I'm not too sure (hence the post) :)
There are two ways of accomplishing this one using the name anchor attribute as suggested by W3schools.
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.
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:
$(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.
Finally the link:
https://jsfiddle.net/Ashokkumargupta/bc1drx0s/
Hope this solves your problem.
Thanks, Ashok
这篇关于锚定到隐藏的div内的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
