0

全幅と高さdiv(それぞれdivが事実上ページです) を持つ Web サイトがあり、リンクとハッシュを使用してそれらをナビゲートします。のページ (全高)に<a href="#work"></a>スクロールします。dividwork

私が今やろうとしているのは、ナビゲーションにもキープレスを使用することです。これにより、上下の矢印を押すだけで各ページを簡単にナビゲートできます。

これには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に見つけることができると考えました..attrdiv

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

.next() 代わりにjQuery を使用する必要があります。

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ます。

HTML で最初に表示される に.activeクラスを必ず追加してください。div

編集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 に答える