gadget：jQuery.5行代码实现简单的tab切换

代码如下

HTML

        

            
标题一
            
标题二
            
标题三
        
        

        

            

                
我是第一个
                
我是一行文本
            
            

                
我是第二个
                
我是一行文本
            
            

                
我是第三个
                
我是一行文本
            
        
    

css

#top li{ float: left; margin-left: 20px; padding: 10px;cursor: pointer; 
        border: 1px solid rgba(17, 169, 240, 0.603); }
        .clear{clear: both; }
        .select{background: rgb(211, 132, 132); }
        .tab div{margin-left: 60px; display: none; }
        #tab1{display: block;}

js

$('#top li').mouseover(function(){
  let i = $(this).index(); // 下标
  $(this).addClass('select').siblings().removeClass('select'); 给li添加背景
  $('#tab div').eq(i).show(200).siblings().hide(500); // 给对应下标的文本div设置显示/隐藏的动画
})