0

mypage.php#tab3URLが最初のタブのロードであるか、デフォルトでロードされているときに、（リロード後に）最後に表示されたページをリロードするにはどうすればよいですか？liリンクにIDを追加し、ハッシュをキャッチしようとしていることに注意してください。

以下のコードは、「アクティブ」クラスを除いて、望ましい効果があります。意味：divが間違ったタブの下に表示されています。提案してくれてありがとう。

<script type="text/javascript">
$(document).ready(function(){
    $(".tabContents").hide();                                       // Hide all tab content divs by default
    if (window.location.hash)
        $(".tabContents").filter(window.location.hash).show();      // Show the div with hash in url
    else
        $(".tabContents:first").show()                              // Show the first div of tab content by default

    $("#tabContainer ul li a").click(function(){                    // Fire the click event         
        var activeTab = $(this).attr("href");                       // Catch the click link
        $("#tabContainer ul li a").removeClass("active");       // Remove pre-highlighted link
        $(this).addClass("active");                             // Set clicked link to highlight state
        $(".tabContents").hide();                                   // Hide currently visible tab content div
        $(activeTab).fadeIn();                                      // Show the target tab content div by matching clicked link.
    });
});
</script>
....
<div id="tabContainer">
    <ul>
        <li><a class="active" href="#tab1" id="tab1">Purchase</a></li>
        <li><a href="#tab2" id="tab2">Sales</a></li>
        <li><a href="#tab3" id="tab3">Transactions</a></li>
    </ul>

    <div id="tab1" class="tabContents">
        <h1>Purchase</h1>
        ... content ...
    </div>
    <div id="tab2" class="tabContents">
        <h1>Sales</h1>
        ... content ...
    </div>
    <div id="tab3" class="tabContents">
        <h1>Transactions</h1>
        ... content ...
    </div>
</div>
4

2 に答える 2

1

私があなたのことを正しく理解しているなら、あなたのページにはディープリンクが必要です。
これを実現する最も簡単な方法は、jQuery アドレスを使用することです。こちらから入手できます

この例を確認してください - http://www.asual.com/jquery/address/samples/api/

十分に文書化されていますが、ここに簡単な例を示します。

$.address.change(function(event) {
    var pathNames = event.pathNames;
    // <<< Your code here.  >>>
    //PathNames is the array with all path elements from the anchor.
});



編集：jQueryアドレスなし

jQueryを使用していると仮定すると、onhashchangeをリッスンできます

$(window).hashchange(function(){
    alert(location.hash);
});

これにより、アンカーの変更がキャッチされますが、ブラウザのデフォルトの動作に問題が発生します。存在しないアンカーを持つすべてのリンクは、ページの上部にジャンプします。これは望ましくないため、すべてのリンクに対してこれを修正するには、クリック リスナーを配置して false を返し、デフォルトの動作に取り組みます。
アンカーも手動で変更することを忘れないでください。

$('a.deep-linking').click(function(){
    window.location.hash = a.attr('hash');
    return false;
});


これは単純な JavaScript で実現できますか?
短い答えはイエスですが、さらにコードを書く必要があります。onhashchangeは IE6/IE7 ではサポートされていないため、主な問題はonhashchangeにあります。
jQuery は、タイムアウトを使用して一定の短い間隔でハッシュをチェックすることにより、問題のあるブラウザーでこれを解決します。

于 2012-09-11T18:36:57.483 に答える
0

jQuery ready(function() の代替案が 1 つ見つかりました。ボディを追加し、onload="load_tab();"if/else ステートメントを削除して、これを機能させました。ready(function() 内で機能する修正をまだ探しています。

function load_tab() {
    if (window.location.hash) {
        var t = window.location.hash.substr(4)-1;
        var i = window.location.hash;
    }
    else {
        var t = '0';
        var i = '#tab1';
    }

    $(".tabContents").hide();                        // Hide all tab content divs by default
    $('#tabContainer ul li a:eq('+t+')').addClass("active");    // Set highlight state
    $(i).show();
}
于 2012-09-11T23:00:35.590 に答える