0

サイト ナビゲーションの手段として Jquery を使用しようとしていますが、ページ参照を URL に添付するのに問題があります。Jquery を使用することを決定したとき、私は 2 つの主な目標を念頭に置いていました...

目標 1: Jquery を使用して、(リンク経由で) トリガーされたときにさまざまな要素を非表示および表示する単一の index.html ページが必要です。- 完了 (過剰に設計されていますが、それでもなお完了しています)。

目標 2: これらのさまざまなページを URL に関連付けて、直接リンクできるようにしたいと考えています (または、更新が発生したときに、デフォルトで最初のページに移動しません)。

これは、現在、さまざまなページに Jquery を実装している方法を示すJSFiddleの例です。URL に添付するページ (複数の div として表される) を取得する方法について、誰かが洞察を提供できることを期待していました。

私のコードの例:

HTML

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>


<div id="wrapper">

<div id="nav">
    <ul>
        <li><a href="#" id="projects-link">Projects</a></li>
        <li><a href="#" id="about-link">About</a></li>
        <li><a href="#" id="contact-link">Contact</a></li>

    </ul>


</div>


<div id="main-area">  


    <!-- Content 1 page -->    

    <div id="content-1" class="content-area">

    Content 1 - Main content


    </div>


    <!-- Content 2 page -->

    <div id="content-2" class="content-area">

        Content 2

    </div>


    <!-- Projects page -->
    <div id="projects" class="content-area">
        Projects
    </div>


    <!-- About page -->
    <div id="about" class="content-area">
        About
    </div>

    <!-- Contact page -->
    <div id="contact" class="content-area">
        Contact
    </div>



</div>

Javascript

$(document).ready(function() {
$(".content-area").hide();
$("#content-1").show();

$("#projects-link").click(function() {
    $(".content-area").hide();
    $("#projects").show();
});

$("#about-link").click(function() {
    $(".content-area").hide();
    $("#about").show();
});

$("#contact-link").click(function() {
    $(".content-area").hide();
    $("#contact").show();
});

});
4

2 に答える 2

1

シナリオ全体の処理方法を少し再構築することをお勧めします。まず、リンクをすべて空のハッシュに設定しました。表示したいコンテンツのIDに設定してみてはいかがでしょうか？location.hash一度やると、便利なセレクターになることがわかります。ウィンドウのイベントにバインドし、hashchange最初の読み込み時に手動でトリガーして、探しているコンテンツを次のように表示できます。

$(window).on("hashchange", function(e) {
    $(location.hash.length > 1 ? location.hash : "#home").siblings().hide().end().show();
}).trigger("hashchange");

ハッシュの長さが実際に「#」よりも長い場合、一致する ID を持つ要素を見つけようとし (それ以外の場合は ID「home」を持つ要素を見つけます)、その兄弟を非表示にしてから、要求されたコンテンツを表示します。

フィドルのこのフォークをチェックして、アンカー内の URL の変更と、コンテンツ要素の ID との相関関係に注目してください。ページの読み込み時に hashchange イベントを強制的に 1 回発生させる利点は、誰かが のページに移動した場合index.html#contact、イベント ハンドラーがすぐに評価し、ID が「contact」のコンテナーを表示する必要があることを検出することです。

于 2013-01-22T21:29:55.983 に答える
0

URL の変更については、「location.hash」を参照してください。ページの変更時に書き込み、ページの読み込み時に読み取ることもできます。以前の次のボタンを管理するために、変更イベント (または古いナビゲーションのタイマー) で確認することもできます。

jquery コードについては、よりグローバルに記述してみてください。例:

$("#nav a").click(function(event)
{    var id = $(this).attr("id");
     var content = $("#content-"+id);
     $("#main-area > div").not(content).hide();
     content.show();
     event.preventDefault(); // no real click please
});

event.preventDefault を忘れないでください。そうしないと、location.hash がリンクの # で上書きされます

于 2013-01-22T21:14:05.383 に答える