2017-02-02 5 views
0

ブートストラップのタブをページのリロード後に維持する方法については、いくつかの記事を読んでいます。私は自分の状況に特有の全く異なる方法を思いついたので、どうやってそれをするのか尋ねていません。ページのリロード時のブートストラップタブの永続性(ただし、その方法はありません)

私のページの最後にはこのコードだけがあり、私は必要に応じて値を入力するためにTWIGテンプレートを使用しています。あなたが知らない場合、それは{{tab_index}}の部分がすべてです。私は単に、ページが読み込まれるときに開いておきたいタブのインデックス番号を挿入しています。

とにかく、この小さなスニペットは、私のページの最後にある:

$(document).ready(function(){ 
    $('.nav-tabs li:eq({{ tab_index }}) a').tab('show'); 
}); 

ページが最初にそれは私が表示するためにそれを伝えるタブに変わり迅速その後、最初のタブ上にあるロードする場合を除いて、十分にシンプル。それはかなり愚かに見える "ちらつき"を作成します。多分フリッカーなしでタブに切り替える方法はありますか?ページがロードされているのに、表示される前に、適切なタブに切り替えることがありますか?

EDIT: [OK]を、ここではそれがどのように動作するかをお見せするためにいくつかのコードです:

まず第一に、私は私の見解として、MVC構造と小枝のテンプレートを使用しています。だから、私のルータテーブルでは、[コントローラ]/[ID]/[アクション]のようなルートを定義しました。 idには任意の整数を指定できます。したがって、ルータはコントローラ内のIDとアクションを配列の異なる値として解析します。 Controller値はインスタンス化するクラスの名前であり、Actionは新しいコントローラオブジェクトを呼び出すメソッドです。 idは何らかの理由で任意の整数にすることができ、ルータが作成するアレイからアクセスできます。

今、ページの各タブは異なるフォームになります。したがって、各フォームのアクションでは、URLは[Controller]/[ID]/[Action]のようになります。 {{ドメイン}}の部分は、ちょうどので、私は小枝テンプレートおよび使用に私のサイトのドメインを注入することができるである

<form name="personal_form" id="personal_form" method="post" action="{{ domain }}/members/profile/0/personal" class="form" role="form"> 

<form name="password_form" id="password_form" method="post" action="{{ domain }}/members/profile/1/password" class="form" role="form"> 

:今、私はこのように二つの形式を持っています絶対URL。その魔法はその番号のURLにあります。

2番目のタブ(タブインデックス1)となるpassword_formをルータに送信すると、router => profile、id => 1、action = >パスワード。

フォームアクションのターゲットである私のPHPスクリプトでは、route_param ['id']が設定されていると、オブジェクトのtab_indexプロパティがそのid番号に定義されます。

if (isset($this->route_params['id'])) { 
    $this->tab_index = $this->route_params['id']; 
} 

何のidが配列でない場合、私は私が私の小枝テンプレートをレンダリングすることを持っていた後、tab_indexは0

ままになりますので、tab_indexのデフォルト値は、0である:

View::renderTemplate('Members/profile.twig', ['member' => $this->member, 
           'domain' => Config::DOMAIN, 
           'tab_index' => $this->tab_index]); 

重要な部分は、tab_index番号をテンプレートにtab_indexとして渡していることです。

私はそのインデックス番号に基づいたオープンなタブを表示するにはJQueryを使用していたテンプレートで最後に

:その後、適切なタブを表示するには、ブートストラップ]タブを伝え

$(document).ready(function(){ 
    $('.nav-tabs li:eq({{ tab_index }}) a').tab('show'); 
}); 

問題は、適切なタブが最初は開いているタブではないということです。ページがロードされると、最初のタブが開き、その後、適切なタブに切り替わります。これは、あるタブから別のタブに切り替わるときにちらつきを引き起こします。

避けることはできますか?申し訳ありませんが、私は少し言いたいことがたくさんあったことを知っています。

+0

あなたはhtmlを共有することができますし、問題のjsfiddleかもしれません。それを直すと簡単になります。 –

+0

確かに分かりますが、説明が必要な場合があります。 – keithmj

答えて

0

私はばかです!ブートストラップタブを使用するには、デフォルトのタブのコンテンツ領域をアクティブに設定し、デフォルトのタブ自体と同様に設定します。その後、Webページを開くと、ページの読み込み時にそのタブとコンテンツが開きます。

私の場合は、ページの読み込み時にデフォルトが開き、次に開くように切り替えられました。ページが読み込まれたときにページ切り替えが表示されますが、これは私が望んでいないものです。

私は単にアクティブなクラスをタブから取り除き、そのタブに関連付けられたコンテンツを取り出しました。影響は、ページが読み込まれたときに既定のページが既に開いていないことでした。したがって、デフォルトから私が望むものへのタブの切り替えはありません。それはちょうど私が行くから望むものに開きます。

関連する問題