jQuery实现tab切换样式及功能

jQuery实现tab切换样式及功能

• HTML部分：

<!--tab切换-->
<ul class="tab_list">
   <li class="min_title">第一个</li>
    <li class="min_title">第二个</li>
    <li class="min_title">第三个</li>
</ul>
<div class="tab_cut">第一个模块内容</div>
<div class="tab_cut">第二个模块内容</div>
<div class="tab_cut">第三个模块内容</div>

• Style部分：

<style>
   * {
       margin: 0;
       padding: 0;
   }

   li {
       list-style-type: none;
   }
   .tab_list {
      display: flex;
      align-items: center;
      cursor: pointer;
      height: 50px;
   }
   .tab_list li{
       margin: 0 10px;
       color: #8797ed;
   }
</style>

• script部分：

<script>
//jQuery写法
$(function(){
   $('.tab_cut').hide()
   $('.tab_cut:eq(0)').show()
   $('.min_title:eq(0)').css({
       color: 'rgb(194 182 255)',
       margin:'0 10px'
   })
   $('.min_title').click(function(){
       const index = $(this).index()
       $(this).css({
           color: 'rgb(194 182 255)',
           margin:'0 10px'
       })
       $(this).siblings().css({
           color: '#8797ed',
           margin:'0 10px'
       })
       $('.tab_cut').hide()
       $(`.tab_cut:eq(${index})`).show()
   })
})
</script>