0

私はいくつかのjsを持っています（私が推測するかなり標準を表示/非表示にします）：

<script>
    function showTransactions(transactions){
        $('.steps').hide()
        $('#' + transactions).show();
    }
</script>

およびいくつかのhtml：

<p><a href="#"onClick="showTransactions('hidden3');return false;">Edit</a></p>
<div id="hidden3" class="steps" style="display: none;">

これで、リンクをクリックするとうまく機能し、表示されます。簡単。jsを現在のステップに更新するにはどうすればよいですか？ステップhidden1、hidden2、hidden3、hidden4があります。デフォルトの開始位置はhidden1であるため、更新すると、更新時にhidden3ではなくhidden1が表示されます。

また、URLリンクを介して、一部のインスタンスの特定のステップにユーザーを誘導する必要があります。page_url＃hidden4を試しましたが、機能しません。デフォルトの最初のステップではなく、そのリンクにhidden4を表示するように指示できる必要があります。

4

2 に答える 2

1

あなたのコードには2つの主な問題があります：

  • jQueryコードを「ドキュメント準備完了」イベントにフックしません。これを行わないと、（潜在的に）ドキュメントが完全にロードされる前に実行されることになります。これはほとんどの場合望ましくありません。
  • onclickインラインJavaScriptを使用しています。そうしないでください。それはもはやJavaScript/HTML統合が書かれている方法ではありません。jQueryには、クリックイベントをキャッチするイベントハンドラーがあります。HTMLとJavaScriptは常に100％分離してください。

CSS：

.hidden {
  display: none;
}

HTML

<p><a class="reveal" href="#hidden3">Edit</a></p>
<div id="hidden3" class="hidden step">

JavaScript

// $() is short for $(document).ready()
$(function () {
    // hide all the steps on document load
    $("div.step").addClass("hidden");

    // show the one step that is identified by the current hash (if any)
    $(document.location.hash).removeClass("hidden");

    $("a.reveal").click(function (event) {
        var idToReveal = $(this).attr("href");

        // store the ID to show in the URL for bookmarking
        document.location.hash = idToReveal;

        // hide every step that is currently visible
        $("div.step").not(".hidden").addClass("hidden");

        // reveal the next div (as identified by the current link's href)
        $(idToReveal).removeClass("hidden");

        // prevent the default click behavior (i.e. prevent navigation)
        event.preventDefault();
    });
});

上記はdocument.location.hash、ページ内部<a href>とjQueryのIDセレクターがすべて同じ構文を使用しているという事実を利用しています。

ハッシュで1ビットの情報を転送したいだけであれば、必要なのはこれだけです。

于 2012-06-26T19:33:47.047 に答える
0

Cookieまたはlocalstorageを使用して、ウィザードの「状態」を設定します

localStorage.Step=2;

クッキー（om nom nom） HTML LocalStorage

于 2012-06-26T19:02:25.290 に答える