複数のステップを含む申し込みフォーム？

Question

私は、クライアントのWebサイトの広告を作成するために使用したフォームがほとんどありません。ユーザーが最初のフォームに記入するまで、他のリンクを無効にするにはどうすればよいですか？私のイメージを見てください。

これは達成したいことです。ここで

私のhtmlコード

<div class="col-md-12"> 
<div class="col-md-4"> 
    <div class="post-new-ad-link"> 
     <a href="#">Post free ad</a> 
    </div> 

    <div class="other-links"> 
     <ul> 
      <li> 
       <a href="#"> 
        <i class="fa fa-pencil-square-o fa-lg fa-fw" aria-hidden="true"></i>&emsp;Basic details</a> 
      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-camera fa-lg fa-fw" aria-hidden="true"></i>&emsp;Images</a> 
      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-money fa-lg fa-fw" aria-hidden="true"></i>&emsp;Price</a> 
      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-map-marker fa-lg fa-fw" aria-hidden="true"></i>&emsp;Location</a> 
      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-info-circle fa-lg fa-fw" aria-hidden="true"></i>&emsp;Contact and status</a> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS

.post-new-ad-link { 
    border-left: 1px solid #e0e0e0; 
    border-right: 1px solid #e0e0e0; 
    border-top: 1px solid #e0e0e0; 
    border-bottom: 0; 
    font-size: 1.7rem; 
    text-align: center; 
    background: #53bff7; 
    border-top-left-radius: 2px; 
    border-top-right-radius: 2px; 
} 
.post-new-ad-link a { 
    transition: all 0.5s ease; 
    color: #fff; 
    display: block; 
    padding: 50px; 
} 
.other-links { 
    border-left: 1px solid #e0e0e0; 
    border-right: 1px solid #e0e0e0; 
    border-top: 0; 
    border-bottom: 1px solid #e0e0e0; 
    background: #fff; 
    border-bottom-left-radius: 2px; 
    border-bottom-right-radius: 2px; 
} 
.other-links ul { 
    list-style-type: none; 
    padding: 0; 
} 
.other-links li { 
    font-size: 1.5rem; 
} 
.other-links li a { 
    padding: 15px 0 15px 20px; 
    display: block; 
    color: #666666; 
    transition: all 0.5s ease; 
} 
.other-links li a:hover { 
     text-decoration: none; 
     background:#ddd; 
} 

Fiddle

はどれjqueryのオプションやその他の一つですか？

Answer 1

ポインタイベント：何もこのトリックを行うべきではありません。私はあなたのHTMLとCSSファイルを同じように変更しました。どのような出来事（完了）の下であなた自身の論理を書かなければならず、次の李を有効にすべきです。現在、私は最初のliのクリックで2番目のliを有効にするロジックを書いています。 3番目のliを有効にするには、次のliをクリックする必要があります。

<li>タグにdata-disabled属性を必ず追加してください。

Fiddle