ideas:

A group of a tags that can be clicked only if they are clicked in order, and cannot be clicked otherwise.
Click in the order from top to bottom. If you don"t click on the A tag in the order, you can"t click on it. You click on the LI tag, and the event is triggered by the li tag. After the previous object is clicked, the disabled of the next A tab will be released, and the click of the LI to which A belongs will also remove
for example: one, two, three, if you do not click the first point, the second will pop up the corresponding prompt, or warning.
N Click N for the click event that releases disabled and li as soon as the page loads. The disabled CLASS of nasty 1 will be released, and so will the click event of the LI to which it belongs.

the code is as follows:

online debugging: https://codepen.io/TtSir/pen/.

  <div id="div1"></div>
  <ul>
      <li class="liProhibited"><a href="-sharp" style="display: block" class="Prohibited"></a></li>
      <li class="liProhibited"><a href="-sharp" style="display: block" class="Prohibited"></a></li>
      <li class="liProhibited"><a href="-sharp" style="display: block" class="Prohibited"></a></li>
  </ul>
<button onclick="aRemoveDisabled()">aRemoveDisabled</button>

</script>
function addLoadListener(fn) {
    if (typeof window.addEventListener != "undefined")
    {
        window.addEventListener("load",fn,false);
    }
    else if (typeof document.addEventListener != "undefined")
    {
        document.addEventListener("load",fn,false);
    }
    else if (typeof window.attachEvent != "undefined")
    {
        window.attachEvent("onload",fn);
    }
    else
    {
        var oldfn = window.onload;
        if (typeof window.onload != "function")
        {
            window.onload = fn;
        }
        else
        {
            window.onload = function() {
                lodfn();
                fn();
            };
        }
    }
}
addLoadListener(nav);
function nav(){
    var initialPage=document.getElementById("initialPage"),
        oA = document.getElementsByTagName("li");
    for (var i = 0; i < oA.length; iPP) {
        oA[i].onclick = function () {
            for (var i = 0; i < oA.length; iPP) {
                oA[i].style.background = "";
            }
            this.style.background = "-sharp676464";
            if(document.getElementById("initialPage")){biological.remove([initialPage]);}
        }
    }
}
function hasClass(ele, cls) {
    return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
        ele.className = ele.className.replace(reg, " ");
    }
}
addLoadListener(aAddDisabled);
function aAddDisabled() {
    var disabledGroup=document.getElementsByClassName("Prohibited");
    for(var i=0;i<disabledGroup.length;iPP){addClass(disabledGroup[i],"disabled");disabledGroup[i].addEventListener("click",aClick);}
}
function aClick() {
    console.log("A");
}
function aRemoveDisabled() {
    removeLiRemind();
var disabledGroup=document.getElementsByClassName("Prohibited");
    var liProhibitedGroup=document.getElementsByClassName("liProhibited");
    for(var l=0;l<liProhibitedGroup.length;lPP){liProhibitedGroup[l].addEventListener("click",li1)}
    var order=0;
    //self.setInterval(function () {console.log(order)},3000);
    if(order ===0 ){removeClass(disabledGroup[order],"disabled");liProhibitedGroup[order].removeEventListener("click",li1);}
     //a
     //order 
    disabledGroup[order].onclick=function () {
        if (order < disabledGroup.length) {orderPP;}
        // for (var i = 0; i < liProhibitedGroup.length; iPP) {liProhibitedGroup[i].removeEventListener("click",li1);}
        removeClass(disabledGroup[order], "disabled"); //disabled
        liProhibitedGroup[order].removeEventListener("click", li1); //
        console.log(order); //
};
}
addLoadListener(liRemind);
function liRemind() {
    var liGroup=document.getElementsByClassName("liProhibited");
    for(var i=0;i<liGroup.length;iPP){
        liGroup[i].addEventListener("click",li)}
}
function li() {
    alert("liProhibitedli")
}
function removeLiRemind() {
    var liGroup=document.getElementsByClassName("liProhibited");
    for(var i=0;i<liGroup.length;iPP){
        liGroup[i].removeEventListener("click",li)}
}
function li1() {
    alert("liProhibited class li2");
}
</script>

process:
1: click for the first time: normal

::disbledGroup[order]

question:
when disbledGroup [order] runs for the first time, that is, when order equals 0, it runs normally. After running, the accumulation method of order makes order=1, but cannot return order=1 to re-assign the second tag to click event;
however, the click method of the first a tag does not disappear. You can also continue to click the first a tab and continue to execute the disbledGroup [order] click event.