思路：初始化时将第一个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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 style="display:none;">黄瓜，土豆，西蓝花都是蔬菜</div>
<div style="display:none;">羊肉，牛肉，猪肉都是肉类</div>
</div></body></html>
作者：椰果粒
链接：https://www.jianshu.com/p/da0a05b45027
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦