代码如下

HTML

<div>
        <ul id="top">
            <li>标题一</li>
            <li>标题二</li>
            <li>标题三</li>
        </ul>
        <div class="clear"></div>
        <div id="tab" class="tab">
            <div>
                <h1>我是第一个</h1>
                <p>我是一行文本</p>
            </div>
            <div>
                <h1>我是第二个</h1>
                <p>我是一行文本</p>
            </div>
            <div>
                <h1>我是第三个</h1>
                <p>我是一行文本</p>
            </div>
        </div>
    </div>

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设置显示/隐藏的动画
})