0

私が抱えている問題を解決したいのですが。作成した Web サイトがあり、メニューのテキストの下にスライダーが必要です。

次のように: DEMO (このコードは私が書いたものではなく、どこで見つけたか覚えていません。)

Javascript コード。

$('li').click( function() { 
$('.active').removeClass('active');
$(this).addClass('active');
var top = $(this).offset().top + $(this).height() + 10;
var left = $(this).offset().left;
$('#marker').stop().animate( { top: top, left: left  }, 400 );
});

$('li:first').trigger('mouseover');
$('#marker').fadeIn();

これは、ナビゲーション メニューがどのように見えるかの大まかなアイデアです。私が抱えている問題は、自分のウェブサイトにスライダーを置きたいということです (ただし、見栄えが良くなるようにします)。問題は、リンクの 1 つ (ホーム ボタンなど) をクリックすると、新しい HTML ファイルを追加すると、スライダーが滑らかに動かなくなります。別のページにいるときにスライダーの位置が変わるだけで、スライド アニメーションは表示されません。

フレームセット（ frameset ）でこの問題を解決しようとしましたが、うまくいきましたが、問題はフレームセットがURLを更新しないようにすることであり、私はそれが嫌いなので、この問題を解決する方法ではありません.

皆さんからの助けが必要なのは、この問題をどのように解決できるかということです。私は解決策を探していましたが、何も見つかりませんでしたが、JQuery または Javascript のいずれかを使用する必要があると思います。

読む時間がない場合：

メニューボタンをクリックしたときにコンテンツをロードし、ページ全体を再ロードせず、新しいコンテンツをロードするセクションのみを再ロードする Web サイトを作成する方法についての解決策が必要です。これで URL が更新されます (たとえば、ホームページにいる場合は /home.php と表示され、about ページにいる場合は /about.php と表示されます)。

前もって感謝します。// DeeLaY

4

2 に答える 2

2

必要なのは、HTML5 History API (pushState) と AJAX の組み合わせです。

シンプルな jQuery AJAX (GET): http://api.jquery.com/jQuery.get/ 履歴の操作について: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

これは大まかな入門チュートリアルです: http://net.tutsplus.com/tutorials/html-css-techniques/a-first-look-at-the-history-api/

そして、ここにあなたが求めているものの動作デモがあります: http://html5demos.com/history

編集: 最後のリンクを修正しました。

于 2013-09-10T18:01:17.667 に答える
-1

jqueryまたは単にjavascript（ajax）に存在するメソッドを使用して、例に関連付けるイベントに応じてページをロードできます

$("buttonX").click(function(){

    $('#container').load('pageX.html');
});
于 2013-09-10T17:58:03.097 に答える