0

我有一个具有完整宽度和高度div的网站(每个div实际上都是一个页面),您可以使用链接和哈希浏览它们;<a href="#work"></a>将滚动到带有of的页面(全高div)。idwork

我现在要做的是也使用按键进行导航,因此您可以通过按向上和向下箭头来简单地浏览每个页面。

我想我可以为此使用 switch 语句?我遇到的麻烦是让它充满活力。我想到的方法是window.location每次按下一个键时都使用新的哈希并将其添加到末尾,因此会使用相应的id.

使用if语句我可以做这样的事情..

  var hash = window.location.hash.substring(1), // get hash for current page
  url  = window.location.pathname; // get url

  if (hash == 'home' && e.keyCode == 40) { 
    window.location = url+'#about' // update location with new hash
  } 

但我想不出如何使用 switch 语句来做到这一点。我需要某种方法来检查下一个哈希值,而不是手动设置它。我做了一些谷歌搜索,发现nextAll并认为我可以用它来找到attr下一个div这样的..

var hash = $('.what').nextAll('div:first').attr('id').substring(5);
hash = '#'+hash;

这可行,但显然它只寻找第一个div并且不会每次都更新,我怎样才能获得下一个div,以便我可以使用这样的switch语句?

$(document).keydown(function(e) {

  switch (e.which) {
    case 37: window.location = url //url is equal to the next hash location
        break;
    case 38: window.location = url //url is equal to the previous hash location
        break;
  }
});

HTML

<div id="work_1" class="what scrollv">
    <div class="wrap">
        <h2>work 1</h2>
    </div>
</div>

<div id="work_2" class="what scrollv">
    <div class="wrap">
        <h2>work 2</h2>
    </div>
</div>

<div id="work_3" class="what scrollv">
    <div class="wrap">
        <h2>work 3</h2>
    </div>
</div>

有什么想法吗?我真的不想使用很长的 if else 语句!

4

1 回答 1

1

您应该改用 jQuery .next()

var hash = $('.what').next().attr('id').substring(5)

$('.what').next()会给你.what的下一个兄弟姐妹。

编辑:

要跟踪哪个div是活动的,您可以添加一个.active像这样的类:

var hash = $('.active').removeClass('active').next().addClass('active').attr('id').substring(5);

$('.active').next()然后总是会给你下一个 div 之后.active

确保将.active类添加到div最初在 HTML 中可见的类。

编辑2:

您可以通过.active在右侧添加类div,根据当前hash,在任何页面上启动它$(document).ready(function(){})

$(document).ready(function(){
    var hash = window.location.hash.substring(1)
    $('#' + hash).addClass('active');
})

并将前面的行更改为:

var hash = $('.active').removeClass('active').next().attr('id').substring(5);

然后,您不必在 HTML 中.active的首字母上设置类。div

于 2013-04-28T00:08:28.153 回答