如何通过实现CSS移至下一个/上一个选项卡？

Question

具体实现时，我们可以选择带有$ {'。tabs'）。tabs（'select'，'tabid'）之类的jquery代码的标签，但问题是当我单击“按钮”时如何移至下一个或上一个标签标签？

<div class="row">
<div class="col s12 l12">
    <ul class="tabs">
        <li class="tab col s3" data-tab="tab1"><a href="#data_siswa">Data Siswa</a></li>
        <li class="tab col s3" data-tab="tab2"><a href="#data_ortu">Data Orang Tua</a></li>
        <li class="tab col s3" data-tab="tab3"><a href="#document">Document</a></li>
        <li class="tab col s3" data-tab="tab3"><a href="#pilih_jurusan">Pilih Jurusan</a></li>
    </ul>
</div>
<div id="data_siswa" class="col s12">
    <button type="button" class="btn">Next</button> 
</div>
<div id="data_ortu" class="col s12">
    <button type="button" class="btn">Previous</button> 
    <button type="button" class="btn">Next</button> 
</div>
<div id="document" class="col s12">
    <button type="button" class="btn">Previous</button> 
    <button type="button" class="btn">Next</button> 
</div>
<div id="pilih_jurusan" class="col s12">
    <button type="button" class="btn">Previous</button> 
    <button type="button" class="btn">Next</button>
</div>