0

私はjqueryタブを使用しており、それぞれでページネーションを取得しようとしていますが、すべて正常に機能しますが、2番目のタブをクリックして次のページに移動すると、問題なく動作しますが、最初に開いたタブ新しいコンテンツを表示するには、2 番目のタブをクリックし続ける必要があります。私の質問は、ユーザーがページネーションの次のページをクリックすると、コンテンツが更新されても同じタブが開いたままになるようにするにはどうすればよいかということです。

これを現在のコードに組み込む方法に関する私の計画は、URLを使用することですmail.php?page=2&tid=2

page=2 は、正常に機能するページネーションの参照ですが、そのタブが開いているように tid (タブ ID) を作成する必要があります。

見覚えのあるタブの JavaScript は次のとおりです。

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

});

そして、タブの html (リストをコメントアウトする必要がありました)

//<div id="tabsX">   <div id="tabContent">   <ul class="tabs">
   // <!--<li><a id="all" href="#all" class="all">All</a></li>-->
   // <li><a href="#inbox" class="inbox"></a></li>
   // <li><a href="#outbox" class="outbox"></a></li>
   // <li><a href="#compose" class="compose"></a></li>
    //<li><a href="#trash" class="trash"></a></li>
   // 

   // </ul>

およびタブ コンテンツの html (表示するものが多すぎるため、コンテンツのない例として 1 つだけを表示します)

<div id="inbox" class="tab_content">
      <div id="inbox_header" style="display:table-cell; vertical-align:middle">
      <!---content--->          

      </div><!---end inbox_content--->



</div><!---end inbox--->

自分で解決策を見つけることができないように見えるので、助けていただければ幸いです

4

2 に答える 2

2

ここから次の関数を使用してtid、javascriptでパラメーターをキャッチできます

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

次に、このようにコードを変更します

var tabIndex = parseInt(getParameterByName('tid'),10);
$("ul.tabs li").eq(tabIndex - 1).addClass("active").show(); //Activate first tab
$(".tab_content").eq(tabIndex - 1).show(); //Show first tab content

したがって、完全なjsコードは次のようになります

function getParameterByName(name)
    {
      name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
      var regexS = "[\\?&]" + name + "=([^&#]*)";
      var regex = new RegExp(regexS);
      var results = regex.exec(window.location.search);
      if(results == null)
        return "";
      else
        return decodeURIComponent(results[1].replace(/\+/g, " "));
    } 
$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content

    var tabIndex = parseInt(getParameterByName('tid'),10);
    if(!tabIndex)
       tabIndex = 1;
    $("ul.tabs li").eq(tabIndex - 1).addClass("active").show(); //Activate first tab
    $(".tab_content").eq(tabIndex - 1).show(); //Show first tab content

    //On Click Event
    //  add you onlick code here


  )};

ですので追加-1します。ここでドキュメントを確認してください$.eqeq0-based

于 2012-05-20T16:11:44.940 に答える
0

jqueryタブのドキュメントを参照することをお勧めします。使用できるオプションはたくさんあります。クッキーオプション：

$( ".selector" ).tabs({ cookie: { expires: 30 } });

選択した最新のタブをCookieに保存します。選択されたオプションが定義されていない場合、Cookieは最初に選択されたタブを決定するために使用されます。cookieプラグインが必要です。これは、ダウンロードビルダーのdevelopment-bundle>externalフォルダーにもあります。オブジェクトには、Cookieプラグインがオプションとして期待する形式のキーと値のペアが必要です。使用可能なオプション（例）：{有効期限：7、パス：'/'、ドメイン：'jquery.com'、セキュア：true}。jQuery UI 1.7以降、nameプロパティを介して使用されるCookie名を定義することもできます。

また、選択したオプションを使用することもできます。これにより、初期化時に開くタブを指定できます。

$( ".selector" ).tabs({ selected: 3 });

3番目のオプションは、代わりにajax呼び出しを介してタブのコンテンツをロードすることです。

于 2012-05-20T16:53:21.490 に答える