Shulou(Shulou.com)05/31 Report--

本文小编为大家详细介绍"jquery怎么实现点击按钮显示与隐藏效果"，内容详细，步骤清晰，细节处理妥当，希望这篇"jquery怎么实现点击按钮显示与隐藏效果"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

首先来看实现效果

用jquery来实现这种效果是非常简单的

html

首页

热卖

购物车

我的

css

html, body, div, ul, li, img, p { margin: 0; padding: 0; } body { width: 100%; } ul { list-style: none; } .bottom { border-top: 1px lightgray solid; } .bottom ul { height: 50px; display: flex; justify-content: space-around; align-items: center; } .bottom ul li { text-align: center; } .bottom li span { font-size: 26px; font-weight: bold; } .bottom li p { font-size: 18px; } .bottom li.active { color: crimson; } .bottom li:hover { cursor: pointer; }

js

function tab() { $('.bottom li').on('click', function (e) { $(this).addClass("active").siblings().removeClass("active"); }) } tab();

记得引用iconfont和jquery

读到这里，这篇"jquery怎么实现点击按钮显示与隐藏效果"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.