这篇文章主要为大家展示了“JS怎么实现选项卡切换效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS怎么实现选项卡切换效果”这篇文章吧。

相关代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>选择项卡切换-亿速云(yisu.com)</title><styletype="text/css">*{margin:0;padding:0;}div.box{width:50vw;/*vw和vh是可视化窗口的高度和宽度，50vw是可视化窗口宽度的50%*/height:50vh;/*50vh是可视化窗口高度的50%*/display:flex;/*使ul和div处于同一水平列*/margin:20vhauto;}ul.mark{width:10vw;height:50vh;list-style:none;/*去掉li前面的黑点*/text-align:center;}ul.mark>li{border:1pxsolidblack;padding:1vh0;cursor:pointer;/*改变光标*/}div.main{width:40vw;height:50vh;}.main1,.main2,.main3,.main4,.main5{width:100%;height:100%;display:none;}img{width:100%;height:100%;}li.checked{background:#F5D2B4;}div.checked{display:block;/*元素以块状方式显示*/}</style></head><body><divclass="box"><ulclass="mark"><liclass="checked">会员好礼</li><li>vue.js课程</li><li>uni-app入门教程</li><li>uni-app跨平台开发</li><li>数据可视化</li></ul><divclass="main"><divclass="main1checked"><imgsrc="https://7n.yisu.com/attachments/knowledge/202103/75950.png"alt="会员好礼"></div><divclass="main2"><imgsrc="https://7n.yisu.com/attachments/knowledge/202012/96749.png"alt="vue.js课程"></div><divclass="main3"><imgsrc="https://7n.yisu.com/attachments/knowledge/202012/29796.png"alt="uni-app入门教程"></div><divclass="main4"><imgsrc="https://7n.yisu.com/attachments/knowledge/202012/71201.png"alt="uni-app跨平台开发"></div><divclass="main5"><imgsrc="https://7n.yisu.com/attachments/knowledge/202012/66709.png"alt="数据可视化"></div></div></div><scripttype="text/javascript"src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$("ul.markli").click(function(){$("ul.markli").removeClass("checked");//清除li样式$(this).addClass("checked");$(".main>div").css("display","none");varindex=$("ul.markli").index(this);//获取li的索引$(".main>div").eq(index).css("display","block");//通过索引确定相应的内容});</script></body></html>

以上是“JS怎么实现选项卡切换效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！