4

少し前に私はこの質問をしましたJquery tabs keep tab open that is subid in urlと、私の質問に対する答えが見つかったことがわかります。タブからタブに変更するたびに変更されるように変更しようとしていますヘッダーの tid subid、現時点では、変数 tid を tab_id が何であれ変更するだけなので、戻るを押すと、離れた特定のタブを開くことができますが、今回は、タブをスクロールすると、ヘッダーが表示されます。

以前の回答へのリンクがここに表示されない場合は、私のコードです

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 () {
    $(".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
    $("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;
    });
});

他に何か必要な場合はお知らせください。少し混乱している場合は申し訳ありません。

編集:つまり、ヘッダーに ?tid=2 を追加すると、現時点では2番目のタブに移動しますが、タブを変更しても自動的に更新されません

4

1 に答える 1

5

ページをリロードせずに Javascript を使用して現在の URLのパラメーターを変更しようとしても機能しtidません。いくつかのオプションがあります。

  1. JavaScript を使用する代わりに、実際にはタブを新しいページへの単なるリンクにします。

  2. 次のように、タブが実際に id リンクになるようにスクリプトを変更します。

    <li><a href="#inbox" class="inbox"></a></li>

タブをクリックすると、#outbox または #inbox が URL に追加されます。次に、ユーザーが戻るボタンをクリックすると、前の URL に移動する必要があります。また、JavaScript を変更して、ページにタブへのリンク (つまり、page.html#inbox) が含まれている場合に、受信トレイ タブが表示されるようにする必要があります。

HTML に適切な ID とリンクが既にあるようですが、何らかの理由で<li>要素ではなく要素にクリック機能を追加しています<a>。要素がいっぱいになるように<a>要素を作成する必要があります。その後、代わりにタブ切り替え機能を追加できます。これにより、ID を URL に追加できるようになります (つまり、page.html#inbox)。display:block<li>

そのため、代わりに onclick 関数をリンクに追加してみてください。

$("ul.tabs li a").click(function () {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).parent().addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).attr("href");
        $(activeTab).fadeIn(); //Fade in the active content
    });
于 2012-07-02T23:50:01.537 に答える