如何获取链接以转到另一个页面上的特定 div答案

【问题标题】：How to get a link to go to a specific div on another page如何获取链接以转到另一个页面上的特定 div
【发布时间】：2016-09-08 20:37:07
【问题描述】：

假设我有一个链接，上面写着：

<a href="services">Services</a>

当我单击该链接时，我显然想转到服务页面，但我想弄清楚的是如何让该链接将我带到该页面上的特定部分。

问题是，我想显示特定部分的页面，除非我点击标签，否则它不会显示。这是我的服务页面的样子。您将看到如果您单击某个选项卡，则会显示特定部分。

https://jsfiddle.net/esayoaqg/1/

如果我点击了指向服务 1 的链接，我希望该链接转到服务页面并显示 div #service1。

我该怎么做？

<a href="serviceCheck1#service1">Service 1</a>
<a href="serviceCheck1#service2">Service 2</a>
<a href="serviceCheck1#service3">Service 3</a>

$(function(){

    //get the section name from hash
    var sectionName = window.location.hash.slice(1);

    //then show the section
    $('#service-display-box').show();
    //$('#' + sectionName ).show();
    $('#service' + sectionName).show().siblings().hide();
})

【问题讨论】：

对于说这个问题已经回答的人，显然没有完全阅读这个问题。我要显示的部分不可见，需要单击按钮才能显示。

标签： javascript jquery html hyperlink anchor

【解决方案1】：

你可以使用井号#:

<a href="services#service1">Services</a>

//services.html   
<div id="service1">...</div>

更新：

如果您需要在页面加载后自动显示部分，您可以执行以下操作：

$(function(){

    //get the section name from hash
    var sectionName = window.location.hash.slice(1);

    //then show the section
    $('#' + sectionName ).show();
})

【讨论】：

这是否会显示该 div，因为它是隐藏的？您还将在我的小提琴中看到，当有人单击顶部的按钮时，我也会显示 #service-display-box。无论如何可以通过链接显示？
请查看我的更新以显示如何在页面加载后自动显示隐藏的 div
我可以根据我拥有的部分更改此设置，还是只能自动显示一个部分？我总是需要自动显示service-display-box，但是其中的部分会因单击的链接而异。即：单击 service1 链接时，需要显示 service1 部分，依此类推。
我用我尝试过的方法更新了我的问题。我正在显示service-display-box，但所有其他服务仍在显示。我只想显示选择的服务。
对于更新，你可以在哪里做类似的事情？

【解决方案2】：

你可以使用

<a href="blah.html#gohere">blah blah</a>

<p id="gohere">show this content</p>

然后使用基于滚动或窗口位置的显示内容..

很可能需要各种 javascript 才能获得所需的内容。

【讨论】：

【解决方案3】：

您可以使用锚点，但它不会将隐藏元素设置为可见。

您需要添加一些 javascript 来显示它。根据您小提琴中的示例，如下所示：

var index = location.hash.indexOf('#service');
if(index > -1) {
    var serviceId = parseInt(location.hash.substring(index));
    if(serviceId) {
        $('#service-display-box').show();
        $('#service' + serviceId).show().siblings().hide();
    }
}

【讨论】：