强制用户点击<a>顺序链接<ol>& lt; li>秩序

如果用户点击链接，则导航出链接页面，所以没有任何技巧

所以这段代码应该工作，即使在返回页面与链接。并在关闭/打开浏览器后重新排序。

$(document).ready( function() {
  if (!sessionStorage.active) {
    sessionStorage.active = "1";
  }
  (function set() {
    $("li a").each(function(idx, elm) {
      if (sessionStorage.active != idx+1) {
        $(elm)
          .parent().fadeTo(1, 0.7)
          .off("click").on("click", function(evt) {
            evt.preventDefault();
          });
      } else {
        $(elm)
          .parent().fadeTo(500, 1)
          .off("click").on("click", function() {
            sessionStorage.active = parseInt(sessionStorage.active, 10) + 1;
            set();
          });
      }
    });
  }());
});

$(document).ready( function() {
  if (!localStorage.active) {
    localStorage.active = "1";
  }
  (function set() {
    $("li a").each(function(idx, elm) {
      if (localStorage.active < idx+1) {
        $(elm)
          .parent().fadeTo(1, 0.7)
          .off("click").on("click", function(evt) {
            evt.preventDefault();
          });
      } else if (localStorage.active == idx+1){
        $(elm)
          .parent().fadeTo(1000, 1)
          .off("click").on("click", function() {
            localStorage.active = parseInt(localStorage.active, 10) + 1;
            set();
          });
      } else if (localStorage.active > idx+1) {
        $(elm)
          .parent().fadeTo(1000, 1)
          .off("click").on("click", function() {
            return true;
          });
      } 
    });
  }());
});

或版本2的hyper "smplfd"，部分灵感来自jefr -n代码

$(function(){var a=localStorage.a||0,l=$('a')
l.click(function(){if(l.index(this)>a)return false
if(l.index(this)==a)localStorage.a=++a})})

看看这个。(我很好地注释了我的代码，所以不需要解释。但是，如果你需要澄清，就告诉我……: D)

var $links = $("li a");
//simplify localStorage error checking
var supportsLS = true;
try {
    //this will throw an exception if we can't use localStorage
    //ie. the user, like me, disables cookies ... :)
    localStorage.supportsLocalStorage = true;
    }
catch (exc) {
    supportsLS = false;
    }
//initialize the first link they can use
if (supportsLS && localStorage.getItem("nextAvail") === null) {
    localStorage.nextAvail = 0;
    }
function onLinkClick (evt) {
    /*
    This handles a given click on a link.
    */
    //no point in running rest of code--they don't have localStorage support
    //OR we aren't allowed to use it
    if (supportsLS === false) {
        return;
        }
    //cache some info -- improve readability
    var thisInd = $links.index(this);
    var nextAvail = parseInt(localStorage.nextAvail);
    //they can't view this link -- prevent it from working
    if (thisInd > nextAvail) {
        evt.preventDefault();
        }
    //if they clicked the last link they're allowed to click,
    //update localStorage.nextAvail so they can click the next link.
    else if (thisInd === nextAvail) {
        localStorage.nextAvail = thisInd + 1;
        }
    }
//setup onclick handlers
$links.click(onLinkClick);

错误总结:

我最初处理"更新"localStorage.nextAvail的方式是有缺陷的 plain错误。您可以检查代码以了解原因，但足以说明"正在更新"没有更新任何内容，并且在按预期方式使用该程序时，用户可能会意外地撤消其进度。

你的JS使除了第一个以外的所有链接都不可点击，不管它们是否被访问过。

不幸的是，你不能判断一个链接是否被访问过，基于js(见这个链接)。