1

WebサイトにいくつかのjQueryタブがあり、直接リンクできるようにタブを作成しようとしています。

つまり、ユーザーがタブのアンカーを含むURLを入力すると、ページが読み込まれるときに、最初にそのタブが表示されます。

私の元のjQueryコードはhttp://jqueryfordesigners.com/jquery-tabs/から取得したものであり、この機能は含まれていませんでした。元のコードは次のとおりです。

$(function () {
    var tabContainers = $('div.tabs > div');

    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

私はこれにコードを変更しました：

$(function () {
    var tabs = [];
    var tabContainers = $('div.tabs > div');
    $('div.tabs ul.tabNavigation a').each(function () {
        if (this.pathname == window.location.pathname) {
            tabs.push(this);
            tabContainers.push($(this.hash).get(0));
        }
    });

// sniff for hash in url, and create filter search 
var selected = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first'; 

$(tabs).click(function () {
    // hide all tabs
    $(tabContainers).hide().filter(this.hash).show();        
    // set up the selected class
    $(tabs).removeClass('selected');
    $(this).addClass('selected');        
    return false;
}).filter(selected).click();


});

この種の作業-URLにアンカーが含まれているページにリンクすると、関連するタブのコンテンツに移動しますが、他のタブも表示され（他のタブは非表示になりません）、タブも非表示になりません選択されました。

この例を見ることができます：

2番目のタブへのリンクはありません。最初のタブはデフォルトで表示されます。http://74.54.17.66/~innovarc/improve/success-stories/financial-performance/

2番目のタブに直接リンクしようとしています：http://74.54.17.66/~innovarc/improve/success-stories/financial-performance/#financial-performance

jQueryコードの何が問題なのかを理解しようとしましたが、理解できません。私は解決策の助けをいただければ幸いです

4

1 に答える 1

5

ここで実用的な例を作成するためにコードを編集しました（ハッシュ付きのURL）：

http://chrisvillanueva.com/stackoverflow/tabs.html#financial-performance

これが私がそれを機能させた方法です：

1.）「div.tabsul.tabNavigation a」クリックイベントハンドラーでチェーンされた.filter（）メソッドと.click（）メソッドを削除します。これらのメソッドにより、常に最初のタブにフォーカスが移ります。

2.）次のように選択したタブハッシュを作成します。

var selectedTab = window.location.hash ? window.location.hash : '#cost-improvement';

「selectedTab」には、タブ#id参照に使用する値が含まれます。

3.）次に、要求されたタブを次の行で初期化します。

//initalizes tab in url
  $('div.tabs ul.tabNavigation li'+selectedTab+' a').addClass('selected');
  tabContainers.hide().filter($(''+selectedTab+'-tab')).show();

4.）タブマークアップで、次の構文を使用して各リストアイテム要素を定義します。

<li id="financial-performance"><a href="#financial-performance-tab">Second</a></li>

ここで、liには一意のIDが含まれ、アンカー要素は関連するタブを参照します。

5.）タブパネルのマークアップを次のように設定します。

<div id="financial-performance-tab">
       <h2>Second</h2>
        ....

もちろん、私がリンクしたページのソースを見ると、さらに役立ちます。それはあなたにより良い文脈を与えるでしょう。

クイックノート：有効なURLハッシュ値は次のとおりです。

  • コスト改善

  • 財務実績

  • 変更管理

于 2012-06-19T02:12:00.413 に答える