0

Contact-Form を正しく機能させるために数時間試行しています。フォーム自体にはいくつかのタブがあります。私が使用しているタブのコードは、このサイトhttp://jqueryfordesigners.com/jquery-tabs/からのものです

これは私が使用しているスクリプトコードです:

<script type="text/javascript" charset="utf-8">
    $(function () {
        var tabContainers = $('div.tabs > div');
        tabContainers.hide().filter(':first').show();

        $('div.tabs ul.tabNavigation a').click(function () {
            tabContainers.hide();
            tabContainers.filter(this.hash).show();
            $('div.tabs ul.tabNavigation a').removeClass('selected');
            $(this).addClass('selected');
            return false;
        }).filter(':first').click();
    });
</script>

これはこれまでのところうまくいきます。タブは希望どおりに正しく表示されています。Modx Revo の FormIt-Package で作成したフォームも機能します。

ここで問題が発生しました...送信をクリックして検証に失敗すると (ユーザーが必須フィールドへの入力を忘れたなど)、サイトが更新され、最後に選択したタブが表示されず、ページには常に最初のタブが表示されます。

検証エラー - >ページのリロードで最後にアクセスしたタブを表示したい。

この編集により、URL のハッシュタグ (タブの ID) を介して目的のタブを開くことができます (例: www.xyz.com/contact.html?tab=#two):

    <script type="text/javascript" charset="utf-8">
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();

$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
     return false;
});

上記の URL でサイトに入ると、必要に応じて 2 番目のタブを表示できます。

最後にフォームを送信したときに必須フィールドが欠落していると、ページがリロードされてエラーが表示されます。ただし、最後に表示されたタブは開かれず、URL のハッシュタグが「失われる」ため、どのタブも開かれません。

最後にアクセスした/選択したタブがページの再読み込み/更新時に表示されるようにするにはどうすればよいですか?

最初のスクリプト コードの 10 行目と 12 行目の間にあるこのコードを使用して、タブの ID を URL に追加しようとしました。

location.hash = this.pathname.substring(3) + this.hash;

これには、タブをクリックすることで ID がハッシュタグとして URL に追加されるという効果があります。しかし、フォームを送信すると、URL はハッシュタグを「失い」、ページを更新します。ページの読み込み時に、URL が www.xyz.com/contact.html#one に変更されます。www.xyz.com/contact.html#two や www.xyz.com/contact.html#three のように入力しようとすると、URL は常に www.xyz.com/contact.html#one に戻ります。

どんなヒントでも大歓迎です！前もって感謝します！

4

1 に答える 1

0

だから今のところ私はクッキー機能を実装しました:

    <script type="text/javascript" charset="utf-8">
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
$.cookie("tab", (this.hash)); 
alert($.cookie("tab"));
//location.hash = this.pathname.substring(3) + this.hash;
                return false;
            }).filter(':first').click();
$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
     return false;
});

        });
    </script>

タブをクリックすると、新しい Cookie が設定され、値がアラートに表示されます。

ページ読み込み時に Cookie を読み取り、Cookie の値を URL に追加するにはどうすればよいですか?

于 2012-07-15T14:32:57.007 に答える