使用jQuery来做tab的小demo
首先给个样式：
<style> * { margin: 0; padding: 0; list-style: none; } .container { width: 300px; margin: 100px auto; border: 1px solid red; } .menu { display: flex; } .menu li { width: 50px; padding: 10px 20px; cursor: pointer; } .menu li.active { background-color: violet; } .content li { display: none; } </style>
body：
<div class="container"> <ul class="menu"> <li class="active">杭州</li> <li>杭州</li> <li>杭州</li> <li>杭州</li> </ul> <ul class="content"> <li style="display: block;">火55车票</li> <li>火44车票111</li> <li>火66车票222</li> <li>33火66车票</li> </ul> </div>
js：
[<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>](https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js) <script> $(".menu li").click(function () { $(this).addClass("active").siblings().removeClass("active") let index =$(this).index() $(".content li").eq(index).show().siblings().hide() }) </script>
这是一个完整的小例子。
其实最主要的就是2行代码：$(this).addClass("active").siblings().removeClass("active")
这里的this指向的是li，此this为js对象所以添加$(),addClass()向被选择的元素添加一个或多个类，siblings（）它的兄弟姐妹，removeClass（）去除其他样式。
第二行的解读：let index =(".content li").eq(index).show().siblings().hide()
eq（）代表下标，show（）等于display：block，siblings（）兄弟姐妹，hide（）隐藏。
这是我的第二篇博客没有什么实际的意义就是单纯的记录一下，如有不周，请多包涵。
