想在其他html页面上只运行匹配id链接吗

Want to Run only match id links on other html page?

本文关键字：运行 id 链接 其他 html      更新时间：2023-09-26

anchor_example1.html

这是第一页代码

h1>Menu page</h1> 
<h2>Anchor example</h2>
<h3><a name="menu">Menu</a></h3>
<ul>
<li><a href="anchor_example2.html#a001">Jump to a001</a></li>
<li><a href="anchor_example2.html#a002">Jump to a002</a></li>
<li><a href="anchor_example2.html#a003">Jump to a003</a></li>
</ul>

anchor_example2.html

这是第二页代码

<h1>Target page</h1>
<h2>Anchor example</h2>
<h3><a name="a001">a001</a></h3>
<p>paragraph text ...</p>
<h3><a name="a002">a002</a></h3>
<p>paragraph text ...</p>
<h3><a name="a003">a003</a></h3>
<p>paragraph text ...</p>
<hr>

当我点击第一个href链接时，它也会在第二页上打开所有其他链接。但我希望它在第一个href连接选择on时根据指定的id#a001示例运行。

<li><a href="anchor_example2.html#a001">Jump to a001</a></li>

然后它只运行第二页上的第一部分，所有其他部分都将隐藏。

<h3><a name="a001">a001</a></h3><p>paragraph text ...</p>

如果您正在寻找一个基于jquery的解决方案，它将完全隐藏其他部分，而不是您通过url指定的部分，那么下面的解决方案是可行的。

anchor_example1.html

<h1>Menu page</h1> 
<h2>Anchor example</h2>
<h3><a name="menu">Menu</a></h3>
<ul>
<li><a href="anchor_example2.html#a001">Jump to a001</a></li>
<li><a href="anchor_example2.html#a002">Jump to a002</a></li>
<li><a href="anchor_example2.html#a003">Jump to a003</a></li>
</ul>

anchor_example2.html

<h1>Target page</h1>
<h2>Anchor example</h2>
<div class="content" name="a001">
    <h3><a>a001</a></h3>
    <p>paragraph text ...</p>
</div>
<div class="content" name="a002">
    <h3><a>a002</a></h3>
    <p>paragraph text ...</p>
</div>
<div class="content" name="a003">
    <h3><a>a003</a></h3>
    <p>paragraph text ...</p>
</div>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".content").hide();
        var currentUrl = window.location.href;
        var anchorVal = currentUrl.split("#")[1];
        $('.content[name='+anchorVal+']').show();
    })
</script>

您应该通过id而不是name 来指定它

相关文章：