1

jquery ui タブを使用して、 http://www.code7dev4.co.uk/dataのページのタブを切り替えています。

関連する jquery コードは次のとおりです。

jQuery(document).ready(function ($) {
    function activateTab($tab) {
        var $activeTab = $tab.closest('dl').find('a.active'),
            contentLocation = $tab.attr("href") + 'Tab';

        // Strip off the current url that IE adds
        contentLocation = contentLocation.replace(/^.+#/, '#');

        //Make Tab Active
        $activeTab.removeClass('active');
        $tab.addClass('active');

        //Show Tab Content
        $(contentLocation).closest('.tabs-content').children('li').hide();
        $(contentLocation).css('display', 'block');
    }

    $('dl.tabs dd a').live('click', function (event) {
        activateTab($(this));
    });

    if (window.location.hash) {
        activateTab($('a[href="' + window.location.hash + '"]'));
        $.foundation.customForms.appendCustomMarkup();
    }
});

ここで、クライアントはデータ検索ごとに一意の URL を作成するために右側のフォームを必要とし、これらはパラメーターとして URL に含まれています (例: http://www.code7dev4.co.uk/data?form_send=send&country=Uganda§or= health&strail=plac&units=DollarConstant&year=2009 )。

タブを切り替えると url 変数が失われ、/data#table.

これらの URL パラメータが維持されるようにコードを変更するにはどうすればよいですか?

4

1 に答える 1

0

次を使用してベース URL を設定しています。

<base href="http://www.code7dev4.co.uk/data">

これは、現在の URL (クエリ文字列を含む) に追加するだけでなく、http://www.code7dev4.co.uk/data#idをロードするため、フラグメント識別子を破棄しています。これは、クエリ文字列が削除されていることを意味し、さらに重要なことに、ページをリロードします(リロードしないタブ切り替えの目的全体を無効にします)。

base タグを削除すると問題は解決しますが、他の場所にどのような影響があるかはわかりません。

アップデート

以下は、あなたが扱っている問題を「修正」するために私が見つけた唯一の解決策です。この手法を使用しないことをお勧めします。これは洗練されておらず、Chrome v23 以外ではテストされていません。事実上、アンカーのイベント中に属性baseを再書き込みすることにより、要素を非アクティブにしています (これはページのタブに対応します)。次に、イベントの後に元の 20 ミリ秒をリセットします。クリック イベントの前にイベントが発生するため、遅延を組み込む必要があります。hrefclickhrefmouseupmouseup

var anchor = document.querySelector("a"),
    baseElement = document.querySelector("base"),
    baseHref = baseElement.getAttribute("href");

    anchor.addEventListener("click", function (event) {
        baseElement.setAttribute("href", "");
    }, true);

    anchor.addEventListener("mouseup", function (event) {
        setTimeout(function () {
            document.querySelector("base").setAttribute("href", baseHref);
        }, 20);
    }, true);

最善の解決策は、単純にタグを使用baseしないことですが、HTML 出力を制御できない場合は、ピンチで 1 日を節約できます。他の誰かがより良い（つまり、よりエレガントな）ソリューションを思い付くかどうかを知りたいです。

于 2012-09-30T09:24:47.340 に答える