0

divブロックをディープリンクする方法を探しています。特定のページに、それぞれが独自のコンテンツを持つ複数のdivブロックがある場合があります。このブロックの1つが表示され、他のブロックは非表示になります。リンクまたはボタンを押すと、対応するdivが表示され、他のdivは非表示になります。divのHTMLは次のとおりです。

<div id="6ba28aae2dae153a1686cfee276632d8" class="page-block" style="display: block;">
    <p>
    1st block. 
    </p>        
</div>
<div id="55cead0effa915778913d8667d0ae3a9" class="page-block" style="display: none;">
    <p>
    2nd block. 
    </p>
</div>

そして、これがブロックを切り替えるために使用されるJavaScriptです。

/* Hide and show necessary blocks. */
function switchBlocks(UID)
{
    var blocks = $('div.page-block');

    for (i=0; i<blocks.length; i++) 
    {
        if (blocks[i].id == UID) 
        {
            blocks[i].style.display= 'block';

            // Get the current URL and split it at the # mark
            urlArray = window.location.href.split("#");
            // Select the part before #
            subURL = urlArray[0];
            // Create a fake URL by adding UID to subURL
            history.pushState(null, null, subURL + '#' + UID);
        } 
        else 
        {
            blocks[i].style.display= 'none';
        }
    }
}

私が今やろうとしているのは、ブロックIDを使用して各ブロックに固有のURLを割り当てることです。関連するIDでURLを更新することはできますが、特定のURLを特定のブロックにリンクして、そのURLにアクセスするときに対応するブロックが表示されるようにする方法がわかりません。

HTML5 History APIのチュートリアルを勉強していますが、それを自分のケースに適用する方法を完全に理解することはできません。

4

2 に答える 2

0

クラスを追加および削除してから、目的のcss効果を得る方がよいと思います。これはより効率的だと思いますが、間違っている可能性があります。

表示されている古いdivへの参照を保存して、divのリスト全体を繰り返すのではなく、一方を非表示にしてもう一方を表示することもできます。実際には、1つのdivを表示し、1つのdivを非表示にするだけで済みます。

ブラウザ履歴のサポートに関する限り。クロスブラウザでサポートするには、これが必要ですか？html5履歴APIは、すべてのブラウザでサポートされているわけではありません。これはあなたにとって問題や懸念ではないかもしれません。

サポートされているブラウザのリスト
http://caniuse.com/#search=history

jquery bbqを使用して、Webアプリケーションに履歴サポートを追加しました。古いブラウザでうまく機能します。
http://benalman.com/projects/jquery-bbq-plugin/

大規模なJavaScriptプロジェクトの場合、Backbone.jsは、ブラウザーの履歴をサポートするだけでなく、コードベースの管理を容易にする他の多くの便利な組み込み関数を備えています。

于 2012-08-13T13:44:20.907 に答える
0 
if(window.location.hash == "#55cead0effa915778913d8667d0ae3a9")
{
 $("div.page-block").hide();
 $("div#55cead0effa915778913d8667d0ae3a9").show();
}

また

hash_id = window.location.hash;
if(hash_id.length > 0)
{
 $("div.page-block").hide();
 $(hash_id).show();
}
于 2012-08-13T13:31:21.493 に答える