Hashchange显示div

Question

我的页面上有很多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();
            }


});

Answer 1

你的专栏：

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

将“＃”分配给jobID。想必那不是你想要的？可能你想要：

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

Answer 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);
  });    
});

Answer 3

Palpatim是对的，这将完成这项工作：

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

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

Answer 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