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

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

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

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

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

用jquery來實(shí)現(xiàn)這種效果是非常簡(jiǎ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>購(gòu)物車</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>

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

記得引用iconfont和jquery

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-05-05
jQuery實(shí)現(xiàn)點(diǎn)擊圖標(biāo)div循環(huán)放大縮小功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊圖標(biāo)div循環(huán)放大縮小功能,這是一個(gè)很常見很基礎(chǔ)的功能，下面小編通過實(shí)例代碼給大家介紹，需要的朋友可以參考下
2018-09-09
jQuery 判斷元素是否存在然后按需加載內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery 判斷元素是否存在然后按需加載內(nèi)容的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2020-01-01
jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁示例
這篇文章主要介紹了jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁簡(jiǎn)單示例,使用ajax加載,同時(shí)介紹了(document).height()與$(window).height()的區(qū)別,需要的朋友可以參考下
2014-04-04
jquery對(duì)復(fù)選框(checkbox)的操作匯總
本文給大家匯總介紹了一些jQuery操作復(fù)選框（checkbox）的方法和技巧，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2016-01-01
制作高質(zhì)量的JQuery Plugin 插件的方法
最近jquery非常流行，想個(gè)性化定制一些功能，就可以將代碼寫成插件的形式，方便使用與修改。
2010-04-04
JQuery優(yōu)缺點(diǎn)分析說明
如果你還在猶豫是否要學(xué)習(xí)一個(gè)JavaScript框架，并困惑于選擇哪一個(gè)框架，那么我推薦你選擇jQuery。這并非說其它框架不好，只是jQuery可能是最穩(wěn)妥和最具回報(bào)性的選擇。
2011-04-04
jQuery使用數(shù)組編寫圖片無縫向左滾動(dòng)
jQuery編程實(shí)現(xiàn)一組由8幅圖組成的圖片，進(jìn)入網(wǎng)頁初始時(shí)顯示前面4張，然后自動(dòng)向左滾動(dòng)，直到屏幕顯示的是后4張時(shí)停止?jié)L動(dòng)，需要的朋友可以參考下
2012-12-12
jQuery如何使用自動(dòng)觸發(fā)事件trigger
這篇文章主要介紹了jQuery如何使用自動(dòng)觸發(fā)事件trigger，需要的朋友可以參考下
2015-11-11
jquery獲取及設(shè)置outerhtml的方法
這篇文章主要介紹了jquery獲取及設(shè)置outerhtml的方法,實(shí)例分析了jQuery實(shí)現(xiàn)針對(duì)outerhtml操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03