隱藏列表項目，直到點擊下一步

Question

我有一個多步驟的形式。我只是想顯示第一步活動和其他列表項禁用（這意味着用戶可以看到其他列表項，但不能點擊）如果他填寫了第一步，然後他可以點擊下一步，並轉到第二步。我已經添加了活動狀態。但我堅持鏈接禁用部分。

/*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

你可以做這樣的事情，那就是你可以返回錨標記的虛假的onclick，然後添加類，我已經在CSS

改變了樣式，以及

$("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>