Javascript 如何显示隐藏链接中的特定节

我有多个指向同一页面的链接，但是我希望该页面的不同部分显示出来（最好在页面顶部）。问题是，这些部分在页面加载时是隐藏的，它们所在的容器也是隐藏的。我解决了如何让容器显示的问题，但它显示了所有不同的部分，而我只希望从链接中单击的部分显示出来。即：

我有以下链接：

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

如果我点击显示服务2的链接，我希望显示

服务显示框

，然后显示

#服务2

div，然后不显示其所有同级

以下是我的javascript：

$(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();
})

/*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();
    }
}*/

---

您可以尝试使用CSS控制可见性，只需使用JS切换类即可

JS:

CSS:

---

似乎您的节选择器的格式不正确。基本上是这样的：

你点击

将加载

serviceCheck1

页面

此行运行：

var sectionName=window.location.hash.slice（1）

sectionName

现在包含

“service1”

此行运行：

$（'#服务'+sectionName）.show（）.sides（）.hide（）

其计算结果为

$（'#serviceservice1'）.show（）.sides（）.hide（）

浏览器找不到id为

serviceservice1

什么也没发生：）

相反，由于

window.location.hash

已经包含

#service1

，只需运行以下命令：

$(window.location.hash).show().siblings().hide();

---

它将找到适当的元素，显示它，并隐藏它的同级。

感谢您的尝试。但这没用，不用担心。问题是什么？刚刚修改了答案，将

visible

类也从框中删除。不太确定。容器或服务将显示。您的

sectionName

变量将在第一行代码之后包含

“section1”

。因此，最后一行将显示为

$（“#Section1”）…

，这似乎不是您想要的。@Mikemcaughan那么您是说更改我的链接以仅显示

#1

，还是从

$（“#服务”+sectionName）中取出
#服务
。show（）.sibles（）.hide（）？我试着这么做，但没有得到任何不同的结果。我尝试了
$（sectionName）.show（）.sides（）.hide（）只需使用
$（window.location.hash）.
@MikeMcCaughan谢谢，成功了！请留下答案，我会投票给你。再次感谢你的帮助！
$('#service-display-box').addClass('visible');// Make the wrapper visible
$('#service-item-box').removeClass('visible');// Double-check all the other boxes are still hidden
$('#service' + sectionName).addClass('visible');// Make the target box visible

#service-display-box,
#service-item-box{
    display:none;
}
#service-item-box.visible,
#service-item-box.visible{
    display:block;
}

$(window.location.hash).show().siblings().hide();