思路：初始化时将第一个li默认为选中样式，第一个content显示，其余的display为none；点击每个li时，将这个li设置为选中，其余兄弟去掉选中的样式，content中也做响应的变化
代码：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body, div, ul, ol, li, p { margin: 0px; padding: 0px;
} ul { list-style: none;
} ul li { float: left; width: 100px; height: 45px; line-height: 45px; background: #ddd; text-align: center;
} ul li a { text-decoration: none;
} .container { border: 1px solid #abcdef; width: 299px; height: 200px;
} .active { background: gold;
} </style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("ul li").each(function() { var index = $(this).index(); // 初始化
$("ul li").eq(0).addClass("active");
$(this).click(function() { // 点击某个元素时，给这个元素添加active类，其余兄弟元素的active类都取消
$(this).addClass("active").siblings().removeClass("active");
$(".container>div").eq(index).stop(true).show().siblings().stop(true).hide();
})
})
}) </script></head><body>
<ul>
<li><a>水果</a></li>
<li><a>蔬菜</a></li>
<li><a>肉类</a></li>
</ul>
<div class="container">
<div>香蕉，苹果，橘子都是水果</div>
<div >黄瓜，土豆，西蓝花都是蔬菜</div>
<div >羊肉，牛肉，猪肉都是肉类</div>
</div></body></html>
作者：椰果粒
链接：https://www.jianshu.com/p/da0a05b45027