如何从隐藏的链接中显示特定部分

Question

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

我有这些链接：

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

然后在serviceCheck1 页面上我有这个 HTML：

<div id="service-display-box">
  <div id="service-display-box-container">
    <div class="service-item-box" id="service1">
      <div class="service-item-title">Service 1</div>
    </div>
    <div class="service-item-box" id="service2">
      <div class="service-item-title">Service 2</div>
    </div>
    <div class="service-item-box" id="service3">
      <div class="service-item-title">Service 3</div>
    </div>
    <div class="service-item-box" id="service4">
      <div class="service-item-title">Service 4</div>
    </div>
    <div class="service-item-box" id="service5">
      <div class="service-item-title">Service 5</div>
    </div>
    <div class="service-item-box" id="service6">
      <div class="service-item-title">Service 6</div>
    </div>
  </div>
</div>

如果我单击显示服务 2 的链接，我希望显示 service-display-box，然后显示 #service2 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();
    }
}*/

Answer 1

您的部分选择器似乎格式不正确。基本上会发生这种情况：

1. 你点击<a href="serviceCheck1#service1">Service 1</a>
2. serviceCheck1 页面加载。
3. 这条线运行：var sectionName = window.location.hash.slice(1);
4. sectionName 现在包含 "service1"
5. 这条线运行：$('#service' + sectionName).show().siblings().hide();
6. 计算结果为$('#serviceservice1').show().siblings().hide();
7. 浏览器找不到id为serviceservice1的元素
8. 什么也没发生 :)

相反，由于window.location.hash 已经包含#service1，只需运行以下命令：

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

它将找到合适的元素，显示它，并隐藏它的兄弟。

Answer 2

您可以尝试使用 CSS 来控制可见性，并简单地使用您的 JS 切换一个类。

JS：

$('#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

CSS：

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