思路：初始化时将第一个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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦