0

Jqueryタブを使用しているページがあります。タブは、タブのコンテンツ領域に表示する内容だけでなく、タブdivの外側にも表示する内容を決定します。

私が望む動作は、ユーザーがタブを選択したときに、URLに新しいパラメーターを使用してページ全体をリロードすることです。（私は現在、文字列をlocation.hrefにタックして、ページを強制的にリロードすることでこれを行っています。

select: function(event, ui) {
    // ... determine new_url
    location.href = new_url;
}

そして、ページがリロードされたときに、右側のタブをアクティブ/選択したいのですが、タブのパラメーターを検出することでそれを実行しようとしています。

create: function(event, ui) {
   // ... figure out which tab should be selected
   $('.tabs').tabs('select', tab_index);
}

これにより、ブラウザはcreate-tabs、select-tab、reload、create-tabs、select-tab...などの終わりのないサイクルになります。これから抜け出す方法はありますか？

JQueryタブはこの種の作業用ではないことを理解していますが、助けていただければ幸いです。JQueryタブを試すのはこれが初めてです。

いくつかの追加の注意事項：-いくつかのロジックにRailsを使用しています-選択する必要があるタブに「ui-state-active」クラスを試行しましたが、上書きされているようです。まず、最初のタブ（インデックス0）がアクティブに設定され、次にタブ作成機能で、選択したいタブが選択されます。

<li class="tab<%= " ui-state-active" if THIS_TAB_SHOULD_BE_SELECTED %>">
  <a href="#tab-<%= type.downcase %>">tab 1</a>
</li>
4

1 に答える 1

0

ユーザーがタブを変更するたびにページをリロードするタブと、一部のコンテンツを表示/非表示にするタブを混在させることはできません（または混在させるべきではありません）。2つの方法のいずれかに固執することをお勧めします。whleページを変更する場合は、両方のタブとその他のコンテンツを表示/非表示にするか、新しいコンテンツをajaxして、古いコンテンツを新しいコンテンツに置き換えます。または、次のようなこともできます
。HTML：

<div class="tabs">
  <span class="tab-head active">Tab 1</span>
  <div class="tab-content active">Lorem ipsum...</div>
  <span class="tab-head">Tab 2</span>
  <div class="tab-content">Lorem ipsum...</div>
  <span class="tab-head">Tab 2</span>
  <div class="tab-content">Lorem ipsum...</div>
</div>

CSS：

.tabs {overflow: auto;}
.tab-head {display: inline-block; float:left;}
.tab-content {display:none;}
.tab-content-active {display:block;}

JS：

$(".tabs .tab-head").click(function(){
    $(".tab-content,.tab-head",$(this).parent()).removeClass("active");
    $(this).addClass("active");
    $(this).next(".tab-content").addClass("active");
});

それは私が数ヶ月前に別のサイトのために作ったものとほぼ同じです。

編集：私は現在、URLのfragment_id部分でそのデータを渡すことにより、すべての単一のタブバーに初期タブ位置を割り当てる方法に取り組んでいます。page.com/path/page.php?foo=bar&baz=quux#tabs=0:1,2:6;ここ#tabs=0:1,2:6;で、は重要な部分です。オンロードハンドラーを解析して、開始から適切なタブを表示し、タブ情報が異なる同じページを指すリンクを検索するJSを作成します。

于 2012-07-31T19:32:17.783 に答える