Question

I have a multi step form. I just want to show the first step active and other list items disable(that means user can see other list items but cannot click) If he fills out the first step then he can click next and go to second step. I have already added the active state. But I'm stuck with link disable part.

/*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中更改了样式

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Hide list items until click next

1 个答案: