0

JQueryUI TABS プラグインを使用しています。

私のタブ構造があります。

<div id="tabs">
  <ul>
    <li><a href='#tabs-1'>TabGroup1</a></li>
    <li><a href='#tabs-2'>TabGroup2</a></li>            
  </ul>
  <div id='tabs-1'>
    <a href='tab1_link1.html'>TabGroup1-link1</a>
    <a href='tab1_link2.html'>TabGroup1-link2</a>
  </div>
  <div id='tabs-2'>
    <a href='tab2_link1.html'>TabGroup2-link1</a>
    <a href='tab2_link2.html'>TabGroup2-link2</a>
  </div>
</div>

タブが選択されたときに、そのようなコードを使用して、タブの最初のリンクを選択してロードします。それ自体が機能します。

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

        // Activate first link on tab
    $( "#tabs" ).bind( "tabsselect", function(event, ui) {
     window.location.href = $(ui.panel).find('a:first').attr('href');
   });  
});

しかし、私のタスクでは、URL パラメータでタブを選択するための追加コードが強く必要です。そのため、訪問者が 2 番目のタブ グループからリンクを開いた場合、デフォルトの最初のタブではなく、2 番目のタブが開いていると表示する必要があります。

このタブからのリンクがロードされたときに正しいタブを表示する作業コードがあります(AJAXなどはなく、通常のリンクのみ)。$URL['part']エンジンの URL から受け取る変数です。これは個別に正常に動作します。

<?php if(@$URL['part']=='part2'){
    echo '<script>$(function() { $("#tabs").tabs("select","#tabs-2"); });</script>';    
} ?>

しかし、これらのコードブロックの両方を使用すると、ページが繰り返し無限にリロードされます:-(

更新しました：

コードの両方のブロックが SELECT イベントを使用しているため、ループが発生することに注意してください。

UPDATED2:

タブ選択時のリンク読み込みはONCLICK、URL設定でアクティベーションタブのSELECTを使えば解決するのではないかと思います。しかし、これをコードで記述する方法がわかりません。

4

4 に答える 4

1

タブの作成内で処理を移動すると、これは機能しますか:

$('#tabs').tabs({
    select: function(event, ui) {
        window.location.href = $(ui.panel).find('a:first').attr('href');
    }
});

コードの調査では、リンクまたはタブ選択のいずれかによって、URL を確認し、それが同じページである場合はどこにも移動しない方がよい場合があります。

$('#tabs').tabs({
    select: function(event, ui) {
        checkUrl(event, ui.panel);
    }
});
// handle link click on current tab
$('div>a').click(function(event) {
    checkUrl(event, event.target);
});

function checkUrl(event, ui) {
    var ehref = $(event.target).attr('href');
    var wl = window.location.href;
    var currentLocation = typeof ehref == "undefined" ? wl: ehref;
    var newLocation = $(ui.panel).find('a:first').attr('href');
    if (currentLocation != newLocation) {
        window.location.href = newLocation;
    }
};

あなたのコメントを参照して、作成ハンドラーがあるので、その中にバインドがあります：

$('#tabs').tabs({
    create: function(event, ui) {
       $( "#tabs" ).bind( "tabsselect", function(event, ui) {
           window.location.href = $(ui.panel).find('a:first').attr('href');
       });
    }
});

しかし、作成シーケンスでイベントが発生するかどうかはわかりません。これをテストしていないため、作成イベントの前または後にタブの選択が発生した場合（後だと思います）。

于 2012-05-16T16:59:54.677 に答える
0

更新しました：

この解決策は正しくありません。私は歴史的な理由でそれを保持し、コメントはその下にあります. https://stackoverflow.com/a/10642137/1368570 - これは正しい解決策です: 明確でシンプルです

私はタスクに非常に近い解決策を見つけました:

<script language="JavaScript" type="text/javascript">
function MySelect(event, ui){
    // selected - currently selected tab (string)
    var clicked_tab = '' + ui.index //clicked tab

    if(selected !== clicked_tab ){
        //So this code will works ONLY when another tab is selected, so no infinite loop        
        //alert(selected+'/'+ui.index);

            // Activate first link on tab
       $( "#tabs" ).bind( "tabsselect", function(event, ui) {
         window.location.href = $(ui.panel).find('a:first').attr('href');
       });
    }
}   

$(function() {
    $('#tabs').tabs({
        select: function(event, ui) {
            MySelect(event, ui);
        }
     });
});

        //retrieve the index of the currently selected tab
var tabs = $('#tabs').tabs();
var selected = '' + tabs.tabs('option', 'selected'); // from zero 0
</script>

エンジンで処理された URL パラメータに基づいて適切な TAB を生成するコード

<?php 
if(@$URL['part']=='part1'){
    echo '<script>$(function() { $("#tabs").tabs("select","#tabs-1"); });</script>';    
} 
if(@$URL['part']=='part2'){
    echo '<script>$(function() { $("#tabs").tabs("select","#tabs-2"); });</script>';    
} 
if(@$URL['part']=='part3'){
    echo '<script>$(function() { $("#tabs").tabs("select","#tabs-3"); });</script>';    
}
?>

問題：

1 番目のタブから 2 次元または 3 次元に移動すると、window.location.href が機能せず、URL が変更されません。

フリスト以外のタブから移動すると、すべてが完全に機能します。

今日は疲れすぎて、この問題の解決策を見つけることができませんでした。誰かアイデアがあれば、喜んで聞いてください!

また、コードでアラートのコメントを外すと、選択された var が [object Object] であることがわかります。では、オブジェクトと非オブジェクトを比較すると、この完全なソリューションがほとんどの場合にうまく機能するのはなぜでしょうか?

于 2012-05-16T23:43:49.600 に答える
0

私がそれを正しく読めば、リンクの HTML に同じコードが含まれていることになります。つまり、

<div id="tabs">
    <ul>
        <li><a href='#tabs-1'>TabGroup1</a></li>
        <li><a href='#tabs-2'>TabGroup2</a></li>            
    </ul>
    <div id='tabs-1'>
        <a href='tab1_link1.html'>TabGroup1-link1</a>
        <a href='tab1_link2.html'>TabGroup1-link2</a>
    </div>
    <div id='tabs-2'>
        <a href='tab2_link1.html'>TabGroup2-link1</a>
        <a href='tab2_link2.html'>TabGroup2-link2</a>
    </div>
</div>

$( "#tabs" ).tabs()そのページで を呼び出します。もしそうなら$( "#tabs" ).tabs({ active: 1 })、リンクがリダイレクトされるはずのページで使用してみませんか?

于 2013-05-23T12:45:48.023 に答える
0

これは私が見つけた完全な最終的な解決策であり、動作します（クロスブラウザ）!

タブを作成します

$(function() {
    $( "#tabs" ).tabs();
});

現在の URL に対してアクティブにする必要があるタブを選択します

<?php 
if(@$URL['part']=='part1'){
    echo '$(function() { $("#tabs").tabs("select","#tabs-1"); });'; 
} 
if(@$URL['part']=='part2'){
    echo '$(function() { $("#tabs").tabs("select","#tabs-2"); });'; 
} 
?>

以下のコードは、タブを開始し、現在アクティブになっているタブを選択した後である必要があります。そうしないと、無限の URL リロードが発生します。

$(function() {
    $('#tabs').tabs({
        select: function(event, ui) {
            window.location.href = $(ui.panel).find('a:first').attr('href');
        }
    });
});

そこで、URL に基づくタブ選択をコードの先頭に移動すると、すべての問題が解決され、ソリューションがこれほど簡単になりました。

于 2012-05-17T19:17:57.427 に答える