javascript - 隐藏列表项，直到单击下一步

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

你可以做这样的事情，你可以返回 false onclick 的 anchor 标记，然后添加类，我已经在 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>