JSFiddle - React, Tailwind, and code Playground

by gothic

HTML

<form>
    <ul class="list">
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo accusantium praesentium libero omnis ad autem rem tenetur harum molestias enim ipsum architecto labore temporibus officia veritatis! Assumenda aspernatur repudiandae <button>点我</button></li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolorum odit rerum quos recusandae quaerat distinctio similique laboriosam nesciunt soluta consequatur totam aliquid at ducimus nisi a magni! Ullam architecto?<button>点我</button></li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident facere repellendus eligendi minus ad maiores nobis labore nostrum eius nisi dicta magnam sint corrupti dolorum sunt rerum deserunt praesentium commodi.<button>点我</button></li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum modi tempore soluta quam enim quod autem. Dolore fugiat consequatur aut quos quidem corrupti laudantium vero obcaecati possimus consectetur facilis corporis!<button>点我</button></li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem ullam voluptatum neque sint quam corporis vero facere iusto quidem excepturi harum qui laborum id provident obcaecati at eligendi inventore pariatur<button>点我</button>.</li>
</ul>
</form>

CSS

li {margin-bottom: 10px; border : 1px solid blue;}
button {background: red;width: 40px;height: 30px;}

JavaScript

//需求，首先只显示第一个li ，其余的先隐藏。
//然后点击第一个 点我按钮，显示第二个Li,点击第二个显示第三个，依此类推，直到到最后一个按钮点击提交整个表单
//为了方便我把按钮全部用 button 先展示，实际可用 a 标签