Hashchange 显示 div答案

【问题标题】：Hashchange to show divsHashchange 显示 div
【发布时间】：2014-01-31 16:55:16
【问题描述】：

我的页面上有许多 div，默认情况下它们是隐藏的。可以通过链接选择作业（例如“#job8”）。我正在尝试在我的脚本中使用 hashchange 来检查特定哈希的 URL，然后显示适当的 div。

这是一个示例 div

<div class="job-details" id="job8" data-jobid="8">
    <p>Job 8</p>        
</div>

这是我的脚本。

$(document).ready(function(){

        $('.job-details').hide();
});

$(window).bind('hashchange', function() {

        if (location.hash.substring(0,4) == "#job"){
            var jobID = location.hash.substring(0);

            $('.job-details').hide();
            $('[data-jobid="' + jobID + '"]').show();
            }


});

【问题讨论】：

谢谢 Palpatim、Ishan Jain 和 Til。将 jobID 中的子字符串值更改为 4 可以正常工作，因为它现在匹配 div 的 jobid 数据属性。选定的 div 现在将显示，但只有在页面加载后，我需要它作为永久链接工作，以便可以保存或添加书签。在加载的页面上，调整数字会更改 div。但是，使用相同的数字重新输入会再次隐藏 div。我尝试将 hashchange 中的 hide() 更改为：$('.job-details:not([data-jobid="' + jobID + '"]').hide();

标签： javascript jquery html css hashchange

【解决方案1】：

您的线路：

var jobID = location.hash.substring(0);

将“#”分配给jobID。大概这不是你想要的？可能你想要：

var jobID = location.hash.substring(4);

【讨论】：

仔细检查你的答案。

【解决方案2】：

你必须使用hashchange吗？如果不尝试下面的示例，这里是 FIDDLE

<nav>
  <a href="#job1" data-rel="job1">Job 1</a>
  <a href="#job2" data-rel="job2">Job 2</a>
  <a href="#job3" data-rel="job3">Job 3</a>
</nav>

<div class="job-details" id="job1">
  <p>Job 1</p>        
</div>
<div class="job-details" id="job2">
  <p>Job 2</p>        
</div>
<div class="job-details" id="job3">
  <p>Job 3</p>        
</div>

.job-details {
  position: absolute;
  width: 400px;
  height: 200px;
  border: 1px solid #ddd;
  display: none;
}

$(function() {
  $('nav a').click(function() {
    $('.job-details').fadeOut(400);
    $('#'+$(this).data('rel')).fadeIn(400);
  });    
});

【讨论】：

我确实尝试点击链接，也点击关闭按钮，这似乎有效。但我需要能够为 URL 添加书签。

【解决方案3】：

Palpatim 是对的，这样就可以了：

var jobID = location.hash.substring(4);

这是一个 jsfiddle：http://jsfiddle.net/Cc9dL/

【讨论】：

谢谢，是的，这正是我需要的 jobID 号码。选定的 div 现在显示，但仅在页面加载后显示。我可以调整数字来改变 div。但是，使用相同的数字重新输入 div 会再次隐藏自己。我尝试将 hashchange 中的 hide() 更改为：$('.job-details:not([data-jobid="' + jobID + '"]').hide();

【解决方案4】：

Jquery hashchange

在 get/set jobid 中进行一些更改后，您的函数可以正常工作。

这里location.hash给你#job8，所以你可以直接用这个id选择器。

$(window).bind('hashchange', function() {
     if (location.hash.substring(0,4) == "#job"){
         var jobID = location.hash;
         $('.job-details').hide();
         $(jobID).show();
     }
});

Try in fiddle

更新：

$(window).bind('hashchange', function() {
     if (location.hash.substring(0,4) == "#job"){
        var jobID = location.hash.substring(4);
        $('.job-details').hide();
        $('div[data-jobid="' + jobID + '"]').show();
     }
});

Try in Fiddle

【讨论】：