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>

如果我点击显示Service 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

看起来好像您的部分选择器没有正确形成。基本上这种情况发生了：

您点击<a href="serviceCheck1#service1">Service 1</a>
serviceCheck1页面加载。
此行有：var sectionName = window.location.hash.slice(1);
sectionName现在包含"service1"
此行有：$('#service' + sectionName).show().siblings().hide();
评估为$('#serviceservice1').show().siblings().hide();
浏览器无法找到ID为serviceservice1
什么都没发生：）

相反，由于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;
}

如何根据隐藏的链接显示特定部分

2 个答案: