2

なんらかの形式の jquery スライダー プラグインを使用しているため、URL に基づいてクラスを追加および削除するクリーンなスクリプトを作成しようとしています。

5 つのスパンがあり、最初の 1 つにはページロード時にアクティブなクラスがあります

<span class="one active"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>

次のボタンをクリックすると、jquery プラグインは URL の末尾に「#/1」を追加し、スライドごとに番号が 1 ずつ増えるので、これまでスライドごとに行ってきたことを以下に示します。

$(function(){

$('#continue').click(function(){
  var location = window.location.href;

    if (location.indexOf('#/1') > -1 ) {
      $('.one').removeClass('active');
      $('.two').addClass('active');
    }

    if (location.indexOf('#/2') > -1 ) {
      $('.two').removeClass('active');
      $('.three').addClass('active');
    }
  }); 
});

だから私が直面している問題は次のとおりです。

  1. これは次のボタンのクリック機能のみです。ユーザーが前のボタンをクリックした場合、アクティブなクラスも適切な番号に変更する必要がありますが、前のボタンをクリックしているステップを正確に確認する方法が必要になるでしょう。 5 つのステップがあるため、そのコードを 5 回複製する必要があります。

  2. ユーザーがページ スパンを更新すると、.one が再びアクティブになり、ユーザーが使用していたステップがページに表示されます (更新時に最初のステップに戻ることはありません)。

助言がありますか？

ありがとう。

4

1 に答える 1

1 
jQuery(window).hashchange( function(){
    jQuery(location.hash).click();
});

jQuery(window).load( function(){
    jQuery(location.hash).click();
});

これら2つの機能はあなたの問題を解決します

于 2012-12-03T14:38:49.893 に答える