簡單實(shí)現(xiàn)js菜單欄切換效果
分享一個小案例,實(shí)現(xiàn)菜單欄的切換,點(diǎn)擊左側(cè)邊欄,展示右側(cè)主體的頁面,供大家參考,具體內(nèi)容如下
首先實(shí)現(xiàn)html頁面的編寫:
<div id="header"></div> <div id="main"> <!--左側(cè)邊欄--> <div class="affix"> <h4>用戶中心</h4> <ul> <li><a href="#container-myorder" >我的訂單</a></li> <li><a href="#container-buy-stat-canvas" >消費(fèi)統(tǒng)計(Canvas版)</a></li> <li><a href="#container-buy-stat-svg" >消費(fèi)統(tǒng)計(SVG版)</a></li> <li><a href="#container-luck-lottery" >幸運(yùn)抽獎</a></li> </ul> </div> <!--右側(cè)主體區(qū)域--> <div class="right-body"> <div class="active" id="container-myorder">我的訂單</div> <div id="container-buy-stat-canvas">消費(fèi)統(tǒng)計(Canvas)</div> <div id="container-buy-stat-svg">消費(fèi)統(tǒng)計(SVG)</div> <div id="container-luck-lottery">幸運(yùn)抽獎</div> </div> </div> <div id="footer"></div>
其次是css效果實(shí)現(xiàn):
#main .affix { box-sizing: border-box; width: 210px; float: left; padding: 15px; } .affix h4 { font-size: 1.2em; margin: 10px 0; } .affix ul li{ padding: 5px 20px; } .affix ul li.active a{ color: #e4393c; font-weight: bold; } #main .right-body { box-sizing: border-box; margin-left: 210px; padding: 15px; } #main .right-body > div { display: none; min-height: 300px; } #main .right-body > div.active { display: block; }
最后一步運(yùn)用簡單的js實(shí)現(xiàn)點(diǎn)擊左側(cè)邊欄選項(xiàng),展示右側(cè)主體區(qū)域:
$('.affix ul li a').click(function(e){ e.preventDefault(); //修改li的active的位置 $(this).parent().addClass('active').siblings('.active').removeClass('active'); //修改右側(cè)主體中的div的active的位置 var id = $(this).attr('href'); $(id).addClass('active').siblings('.active').removeClass('active'); });
綜上一個簡單的菜單切換就實(shí)現(xiàn)了。
更多菜單效果點(diǎn)擊《JavaScript菜單專題》學(xué)習(xí),還有一些不錯的專題分享給大家: Javascript級聯(lián)菜單特效匯總
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果實(shí)例
- Extjs學(xué)習(xí)筆記之四 工具欄和菜單
- JS實(shí)現(xiàn)自動固定頂部的懸浮菜單欄效果
- 基于vue.js實(shí)現(xiàn)側(cè)邊菜單欄
- 使用ReactJS實(shí)現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
- 原生JS仿蘋果任務(wù)欄菜單,放大效果的菜單
- JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼
- JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類型/自制)
- 非??岬膉s圖形漸隱導(dǎo)航菜單欄
- JS實(shí)現(xiàn)左側(cè)菜單工具欄
相關(guān)文章
微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài)
這篇文章主要介紹了微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07bootstrap實(shí)現(xiàn)的自適應(yīng)頁面簡單應(yīng)用示例
這篇文章主要介紹了bootstrap實(shí)現(xiàn)的自適應(yīng)頁面簡單應(yīng)用,結(jié)合具體實(shí)例形式分析了基于bootstrap的列表布局結(jié)構(gòu)頁面實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2017-03-03Javascript浮點(diǎn)數(shù)乘積運(yùn)算出現(xiàn)多位小數(shù)的解決方法
這篇文章主要介紹了Javascript浮點(diǎn)數(shù)乘積運(yùn)算出現(xiàn)多位小數(shù)的解決方法,需要的朋友可以參考下2014-02-02JS短信驗(yàn)證碼倒計時功能的實(shí)現(xiàn)(沒有驗(yàn)證碼,只有倒計時)
最近接了個項(xiàng)目,其中有這樣的需求:當(dāng)用戶想要獲取驗(yàn)證碼時,就點(diǎn)擊免費(fèi)獲取驗(yàn)證碼 ,然后開始倒計時,倒計時期間按鈕文字為剩余時間x秒,且不可按狀態(tài),倒計時結(jié)束后,按鈕更改為點(diǎn)擊重新發(fā)送,下面給大家分享js短信驗(yàn)證碼倒計時實(shí)現(xiàn)代碼2016-10-10Bootstrap多級導(dǎo)航欄(級聯(lián)導(dǎo)航)的實(shí)現(xiàn)代碼
這篇文章主要介紹了Bootstrap多級導(dǎo)航欄的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-03-03Echarts中常用的參數(shù)總結(jié)及參數(shù)自定義示例代碼
Echarts中參數(shù)的配置功能很強(qiáng)大,對任何一項(xiàng)的配置都很細(xì)致,下面這篇文章主要給大家介紹了關(guān)于Echarts中常用的參數(shù)總結(jié)及參數(shù)自定義的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02