想在其他html页面上仅运行匹配ID链接?

时间:2015-07-25 20:52:12

标签: javascript jquery html css

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链接选择时根据指定的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>

2 个答案:

答案 0 :(得分:0)

您应该id而不是name

指定它

答案 1 :(得分:0)

如果您正在寻找一个基于jquery的解决方案,它将完全隐藏其他部分而不是您通过网址指定的部分,则以下解决方案可以正常工作。

<强> anchor_example1.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>    

<强> anchor_example2.html

dispatch_async(dispatch_get_main_queue(), ^{
    [self.tableview reloadData];
});'