jquery怎么實現點擊按鈕顯示與隱藏效果

本文小編為大家詳細介紹“jquery怎么實現點擊按鈕顯示與隱藏效果”，內容詳細，步驟清晰，細節處理妥當，希望這篇“jquery怎么實現點擊按鈕顯示與隱藏效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

首先來看實現效果

用jquery來實現這種效果是非常簡單的

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

讀到這里，這篇“jquery怎么實現點擊按鈕顯示與隱藏效果”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。