Listenelemente ausblenden bis zum nächsten Klick

Question

Ich habe eine Multischrittform. Ich möchte nur den ersten Schritt aktiv und andere Listenelemente deaktivieren (dh der Benutzer kann andere Listenelemente sehen, aber nicht klicken). Wenn er den ersten Schritt ausfüllt, kann er auf "Weiter" klicken und zum zweiten Schritt gehen. Ich habe den aktiven Status bereits hinzugefügt. Aber ich bin mit Link-Disable-Teil fest.

/*Active state*/ 
 

 
$('ul.post-ad-active a[href="' + url + '"]').parent().addClass('active-post'); 
 

 
$('ul.post-ad-active a').filter(function() { 
 
    return this.href == url; 
 
}).parent().addClass('active-post');

.disabled { 
 
    pointer-events: none; 
 
    cursor: default; 
 
    opacity: 0.6; 
 
}

<div class="other-links"> 
 
    <ul class="post-ad-active"> 
 
    <li> 
 
     <a href="job-basic-details"> 
 
     <i class="fa fa-pencil-square-o fa-lg fa-fw" aria-hidden="true"></i>&emsp;Basic details 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="job-images"> 
 
     <i class="fa fa-camera fa-lg fa-fw" aria-hidden="true"></i>&emsp;Images 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="job-contact-and-status"> 
 
     <i class="fa fa-info-circle fa-lg fa-fw" aria-hidden="true"></i>&emsp;Contact and status 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Sie so etwas tun könnte, das heißt Sie falsch Onclick des Anker-Tag zurückkehren könnte und dann die Klasse hinzufügen, ich habe die Stile als auch in der CSS geändert

$("a[href='job-images']").on("click",false).css('cursor', 'default').addClass("disabled");

.disabled { 
 
    cursor: default; 
 
    opacity: 0.6; 
 
    text-decoration:none 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="other-links"> 
 
      <ul class="post-ad-active"> 
 
       <li> 
 
        <a href="job-basic-details"> 
 
         <i class="fa fa-pencil-square-o fa-lg fa-fw" aria-hidden="true"></i>&emsp;Basic details 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="job-images"> 
 
         <i class="fa fa-camera fa-lg fa-fw" aria-hidden="true"></i>&emsp;Images 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="job-contact-and-status"> 
 
         <i class="fa fa-info-circle fa-lg fa-fw" aria-hidden="true"></i>&emsp;Contact and status 
 
        </a> 
 
       </li> 
 
      </ul> 
 
     </div>