Anmeldeformular mit mehreren Schritten?

Question

Ich habe einige Formulare, die ich verwendet habe, um Werbung für meine Kundenwebsite zu erstellen. Wie deaktiviere ich andere Links, bis der Benutzer das erste Formular ausfüllt? Bitte schau dir meine Bilder an.

Das ist die Sache, die ich erreichen möchte.

Hier ist mein HTML-Code

<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

Jede jquery Option oder andere?

Answer 1

Zeigerereignis: keiner sollte den Trick machen. Ich habe Ihre HTML- und CSS-Datei geändert, um dasselbe zu erreichen. Sie müssen Ihre eigene Logik schreiben, unter welchem ​​Ereignis (Vervollständigung) das nächste li aktiviert werden soll. Zur Zeit habe ich eine Logik geschrieben, um die zweite li auf dem Klick von ersten li zu ermöglichen. Um die dritte Lizenz zu aktivieren, klicken Sie auf die zweite Lizenz ....

Stellen Sie sicher, dass dem <li>-Tag das Attribut "Daten deaktiviert" hinzugefügt wird.

Siehe die Fiddle