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 回答