Question

我有一些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刷新到当前步骤？我有隐藏1，隐藏2，隐藏3和隐藏4的步骤。默认的起始位置是hidden1所以在刷新时它会显示hidden1而不是hidden3，如果那是你在刷新的地方。

另外，我需要通过url链接将用户引导到某些实例的特定步骤。我尝试了page_url＃hidden4，但这不起作用。我需要能够告诉它在该链接中显示hidden4而不是默认的第一步。

Answer 1

您的代码有两个主要问题：

您不会将您的jQuery代码挂钩到＆＃34;文档就绪＆＃34;事件。不执行此操作（可能）会导致它在文档完全加载之前运行，这在大多数情况下都是不受欢迎的。
您正在使用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's ID selector都使用相同语法的事实。

只要您只想在哈希中传输一点信息，这就是您所需要的。

Answer 2

使用cookies或localstorage设置向导的“状态”

localStorage.Step=2;

Cookies (om nom nom) HTML LocalStorage

自定义“步骤”js刷新到当前步骤和直接步骤URL？

2 个答案: