gpt4 book ai didi

javascript - 锚定到隐藏 div 中的元素

转载 作者:太空宇宙 更新时间:2023-11-04 13:05:34 25 4
gpt4 key购买 nike

我试图在另一个页面上创建一个指向 anchor 的 href 链接(我们称它为第 2 页以使其更容易),但是在第 2 页上,有问题的 anchor 包含在一个 div 中,该 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-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>

谢谢!

编辑 - 例如,如果我在“第 1 页”,我希望能够打开指向“第 2 页”(在本例中为 #anch)上的特定元素的链接,但是“#anch”是包含在首次打开页面时隐藏的 div (#hidden) 中。最初,要访问“#hidden”中的内容,用户必须单击标题,这会展开 div 以显示内容。我希望能够单击指向“#anch”的链接(将我带到“第 2 页”)并查看“#anch”中的内容,而无需先单击标题。

据我所见,它可能与'onhashchange'事件有关。虽然我不太确定(因此发帖):)

最佳答案

根据 W3schools 的建议,有两种方法可以使用 name anchor 属性来完成此操作。

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

另一种方法可能是使用通用的 jquery 方法,它的行为类似于名称 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();
})
});

注意:这里的 nameLink 是可以分配给任何 anchor 链接以使用相同功能的类。

最后是链接:

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

希望这能解决您的问题。

谢谢,阿肖克

关于javascript - 锚定到隐藏 div 中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42368028/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com