悬念显示Divs

Question

我的页面上有许多DIV，默认情况下是隐藏的。可以通过链接选择作业（例如，"例如"＃job8）。

这是一个例子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();
     }
});

尝试小提琴

更新：

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

尝试