jquery實現(xiàn)點擊按鈕顯示與隱藏效果

更新時間：2022年04月14日 09:32:25 作者：coder_wb

這篇文章主要為大家詳細介紹了jquery實現(xiàn)點擊按鈕顯示與隱藏效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)點擊按鈕顯示與隱藏的具體代碼，供大家參考，具體內容如下

首先來看實現(xiàn)效果

用jquery來實現(xiàn)這種效果是非常簡單的

html

<div class="bottom">
? ? ? <ul>
? ? ? ? <li class="active">
? ? ? ? ? ?<span class="iconfont icon-yemian-copy-copy"></span>
? ? ? ? ? ?<p>首頁</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? <span class="iconfont icon-caidan"></span>
? ? ? ? ? ? <p>熱賣</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ?<span class="iconfont icon-gouwuche"></span>
? ? ? ? ? ?<p>購物車</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ?<span class="iconfont icon-my"></span>
? ? ? ? ? ?<p>我的</p>
? ? ? ? ? </li>
? ? </ul>
</div>

css

<style>
??? ??? ?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;
? ? ? ? }
</style>

js

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

記得引用iconfont和jquery

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: