0

私のページのいくつかでは、JQuery を使用して、ページを更新せずにコンテンツのさまざまなセクションを表示および非表示にしています。グローバル ナビゲーションからページの特定のセクションにリンクする方法はありますか? 最終的には、ユーザーが別のページからリンクをクリックして、別のページの特定のセクションに戻るようにしたいと考えています。

私が現在ここに持っているものの例がありますhttp://jsfiddle.net/tjaymz/JUJf7/

<nav id="sideNav">
<ul class="noStyle">
    <li><a href="#" name="menu1">Line 1</a></li>
    <li><a href="#" name="menu2">Line 2</a></li>
    <li><a href="#" name="menu3">Line 3</a></li>
</ul>


<section id="page_menu1">
    <h1>Some Heading</h1>
    <p>FPO</p>
</section>

<section id="page_menu2" class="hidden">
    <h1>Heading 2</h1>
    <p>FPO</p>
</section>

<section id="page_menu3" class="hidden">
    <h1>Another one</h1>
    <p>FPO</p>
</section>


$(function(){
$("#main_content section:not(:first-child)").hide();  //hide all but first
$("#sideNav a").click(function () {
    $('#main_content section').hide('fast');
    $('#page_'+this.name).show('normal');
});});

この例を使用すると、別のページからリンクして、この例の「2 行目」と言う必要があります。

4

3 に答える 3

0

これを行う2つの方法：

  1. URIのパラメータが指すボタンをクリックするための小さなJavaScriptを記述します。
  2. ページを分離します。Javascriptは優れていますが、使いすぎると、アクセシビリティが制限されたり、SEOが妨げられたり、リンクが脆弱になったりする可能性があります。それでもjavascriptの感触が気に入った場合は、サーバーがdata-remoteリクエストを受信したときに、javascript、json、またはxmlを介してこれらの個別のページをレンダリングできます。この意味でAJAXを使用すると、サイトはすべてのユーザーに対して機能し続け、UXが原因で予期しない問題が発生することはありません。
于 2013-02-14T21:11:50.590 に答える
0

ページの読み込み時にURLハッシュを確認できます。これらの線に沿って何かを試してください：

$(function () {
    $("#main_content section").hide();

    var selected = $(window.location.hash);
    if (selected.length) {
        selected.show();
    } else {
        $("#main_content section:first-child").show();
    }
});

次に、ユーザーがURLでにリンクすると#page_url1、そのセクションが表示されます。

より包括的なソリューションについては、 jQueryUIタブのようなものを調べることをお勧めします。

于 2013-02-14T21:39:52.683 に答える
0

リンクしたいサイトのページのセクションにアンカーを使用できると思います。グローバル ナビゲーションのリンクをアンカーに移動すると、機能するはずです。

于 2013-02-14T20:41:24.497 に答える