我有一个具有完整宽度和高度div
的网站(每个div
实际上都是一个页面),您可以使用链接和哈希浏览它们;<a href="#work"></a>
将滚动到带有of的页面(全高div
)。id
work
我现在要做的是也使用按键进行导航,因此您可以通过按向上和向下箭头来简单地浏览每个页面。
我想我可以为此使用 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 语句!