2016-10-25 4 views
-3

は私がTAB 1は、すべてのケースで私のためにOKである開かれて、それが開いたページをロードすると切り替える方法タブprogramtically HTML/JS

<ul class="tabs clear has-borderbottom"> 
    <li class="js-tab selected" data-tab="tab1"><a href="#">TAB 1</a></li> 
    <li class="js-tab" data-tab="tab2"><a href="#">TAB 2</a></li> 
    <li class="js-tab" data-tab="tab3"><a href="#">TAB 3</a></li> 
</ul> 

を次のように定義された水平方向のタブがあり、HTMLページを持っています。しかし、タブ1の代わりにタブ2としてタブ2をロードする条件が1つあります。これをプログラムでjsでどうやって行うことができますか?

私は上記のHTMLページにリダイレクトするためにwindow.location.href = "/detailsを使用します。ここで、TAB 2を表示するには、デフォルトのままにしておきます。

+0

プラグインを使用していますか?その情報を – Satpal

+0

のプラグイン用に共有しますか?レンダリングhtmls? – aaj

+1

JavaScriptコードも公開しています。 – AntoineB

答えて

0

window.location.href = "/ details?tab = 2"でパラメータを指定できます。 そして、あなたはに投稿された機能を持つ場所のあなたのGET-パラメータを読むことができます: How to retrieve GET parameters from javascript?

function findGetParameter(parameterName) { 
 
    var result = null, 
 
     tmp = []; 
 
    location.search 
 
    .substr(1) 
 
     .split("&") 
 
     .forEach(function (item) { 
 
     tmp = item.split("="); 
 
     if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]); 
 
    }); 
 
    return result; 
 
}

その後、ドキュメントの選択したクラスのonloadイベントを変更する必要があります。このように、新しいdocument.onload-機能を追加 :

function doThisOnOnload() 
 
{ 
 
    var selected = findGetParameter("tab"); 
 
    
 
    $('.js-tab').removeClass("selected"); 
 
    $('[data-tab="tab'+selected+'"]').addClass("selected"); 
 
}

そのためにjQueryを注入する必要があります。

+0

タブ2が選択(強調表示)されますが、タブは切り替わりません。私はtab2が下線(強調表示)されたtab1をまだ見ることができます。 – aaj

+0

次に、JavaScriptを知る必要があります。どのように動作しますか? – Merschi

関連する問題