2

CMS によって生成された jQuery UI タブのセットがあるため、コンテンツはページごとに異なります。2 つのタブを持つタブ セットもあれば、5 つのタブを持つタブ セットもあります。

これに対する簡単な解決策を探しましたが、見つけられないようです。履歴プラグインと代替コードを見てきました。

これが私のサンプルマークアップです

<div id="tabs"> 
<ul>
<li><a href="#tabs-1">TAB 1 HEADING</a></li>
<li><a href="#tabs-2">TAB 2 HEADING</a></li>
<li><a href="#tabs-3">TAB 2 HEADING<a></li>
<li><a href="#tabs-4">TAB 3 HEADING</a></li>
</ul>
</div>

<div id="tabs-1">tab1 content here</div>
<div id="tabs-2">tab2 content here</div>
<div id="tabs-3">tab2 content here</div>
<div id="tabs-4">tab4 content here</div>

ユーザーがタブ付きコンテンツ内のテキスト リンクからタブを交互に選択できるようにするスクリプトを作成したいと考えています。たとえば、タブ コンテンツ div では、タブ ナビゲーションと同様に、3 番目のタブへのリンクを設定します。スクリプトで目的のタブのインデックスを手動でコーディングする必要はありません。

これが機能することはわかっていますが、タブ化されたすべてのコンテンツでより堅牢なものを作成したいと考えています。

$("#tabs").tabs("select" , "#tab-4");

ここに私がこれまでに持っているものがありますが、うまくいかないようです。私はjQueryが初めてです。アンカー リンクに tabJump という onlick を追加しました。

function tabJump(){
    //get href ID as a number
    var thisID = Number($(this).attr('href').replace(/#tabs-/, '')) - 1;
    // this should trigger the new tab based on this href id.
    $("#tabs").tabs("select" , "#tabs-" + thisID);
};

どうすればこれを機能させることができるかについてのアイデアはありますか？基本的に、クリックされているアンカーリンクのhrefとしてタグのIDが必要であり、この指定されたIDで新しいタブをターゲットにします。これらの id href を持つリンクの複数のインスタンスが必要です。

前もって感謝します。

4

3 に答える 3

1

わかりましたありがとうみんな、ついに私が必要なものを見つけました。

誰かがこれが役立つと思う場合に備えて、以下で共有します。

クリックで機能を開始

<p><a href="#tabs-4" onclick="tabJump(this);">my text link</a></p>

そしてスクリプト

function tabJump(obj) {
//grab the id in the clicked links href
var thisID = Number($(obj).attr('href').replace(/#tabs-/, ''));
//use this ID to trigger the click on the set of tabs
$("#tabs").tabs("select", "#tabs-" + thisID); 
//then scroll to the top of the tabs set
$('html, body').animate({
     scrollTop: $("#tabs").offset().top
 });

};

したがって、これを使用する方法は、タブのコンテンツが CMS の記事で作成されると、最終的に 4 つまたは 10 個のタブになります。次に、最初のタブに、たとえばタブ 4 にリンクする必要があるコピーがあります。そのため、リンクに onclick を追加し、必要なときに jQuery スクリプトを添付します。

ヘルプとヒントをありがとう。誰かがこれを行うよりクリーンな方法を持っている場合は、気軽に投稿してください。

平和

于 2012-09-12T22:55:52.733 に答える
0

これが必要かどうかは正確にはわかりませんが、これが機能するかどうかを確認してください。

ここに実用的なフィドルがあります。

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
    <p>This is tab ONE</p>
    <p><a href="#" class="next">Go to next tab</a></p>
    <p><a href="#" class="prev">Go to prev tab</a></p>
</div>
<div id="tabs-2">
    <p>This is tab TWO</p>
    <p><a href="#" class="next">Go to next tab</a></p>
    <p><a href="#" class="prev">Go to prev tab</a></p>
</div>
<div id="tabs-3">
    <p>This is tab THREE</p>
    <p><a href="#" class="next">Go to next tab</a></p>
    <p><a href="#" class="prev">Go to prev tab</a></p>
</div>


$("#tabs").tabs();

$("#tabs div a").on("click", function(){
    var idx = Number($(this).parent().parent().attr('id').replace('tabs-','')) - 1;
    if($(this).attr('class') == 'next'){
        $( "#tabs" ).tabs( "option", "selected", idx + 1 );            
    }
    else{
        $( "#tabs" ).tabs( "option", "selected", idx - 1 );
    }
 });
于 2012-09-12T03:19:30.843 に答える
0

あなたの機能はうまくいくと思いますtabJump。メソッドの呼び出しを変更しselectて、文字列「#tabs-」と連結するのではなく、番号 (thisID) のみを使用する必要があります。

このような：

function tabJump(){
    //get href ID as a number
    var thisID = Number($(this).attr('href').replace(/#tabs-/, '')) - 1;
    // this should trigger the new tab based on this href id.
    $("#tabs").tabs("select" , thisID);
};
于 2012-09-12T03:52:06.323 に答える