JavaScript Tab菜單實(shí)現(xiàn)過程解析
Tab 選項(xiàng)卡切換效果在現(xiàn)如今的網(wǎng)頁中,運(yùn)用的也是比較多的,包括點(diǎn)擊切換、滑動(dòng)切換、延遲切換、自動(dòng)切換等多種效果
代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{ margin: 0px; padding: 0px; } .current{ background-color: darkgray; color: yellow; width: 50px; height: 30px; line-height: 30px; float: left; } .top{ float: left; width: 50px; height: 30px; line-height: 30px; } #topMenu{ width: 400px; height: 30px; background-color: aquamarine; margin-left: 400px; float: left; } #bottomMenu{ clear: both; float: left; width: 400px; height: 400px; margin-left: 400px; background-color: chocolate; } .hide{ display: none; } .current-content{ color: blue; font-size: 50px; } </style> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div id="topMenu"> <div xxx="c1" class="top current" onclick="tab(this)">menu1</div> <div xxx="c2" class="top" onclick="tab(this)">menu2</div> <div xxx="c3" class="top" onclick="tab(this)">menu3</div> </div> <div id="bottomMenu"> <div id="c1" class="current-content">content1</div> <div id="c2" class="hide">content2</div> <div id="c3" class="hide">content3</div> </div> <script> function tab(self){ $(self).addClass("current"); $(self).siblings().removeClass("current"); var s=$(self).attr("xxx"); $("#"+s).removeClass("hide"); $("#"+s).addClass("current-content"); $("#"+s).siblings().addClass("hide"); $("#"+s).siblings().removeClass("current-content"); } </script> </body> </html>
程序的運(yùn)行效果如下:鼠標(biāo)點(diǎn)擊Tab標(biāo)簽,實(shí)現(xiàn)標(biāo)簽變色效果,下邊的內(nèi)容變成相應(yīng)的標(biāo)簽內(nèi)容.
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 使用ReactJS實(shí)現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
- JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)
- js基于面向?qū)ο髮?shí)現(xiàn)網(wǎng)頁TAB選項(xiàng)卡菜單效果代碼
- js實(shí)現(xiàn)類似菜單風(fēng)格的TAB選項(xiàng)卡效果代碼
- JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果
- js實(shí)現(xiàn)的簡(jiǎn)潔網(wǎng)頁滑動(dòng)tab菜單效果代碼
- js+css實(shí)現(xiàn)tab菜單切換效果的方法
- javascript采用數(shù)組實(shí)現(xiàn)tab菜單切換效果
相關(guān)文章
javascript實(shí)現(xiàn)消滅星星小游戲簡(jiǎn)單版
消滅星星是一款經(jīng)典的益智手游,單位里看到同事天天在手機(jī)上玩的游戲,現(xiàn)在也有web版了,出于業(yè)余愛好,自己嘗試用javascript實(shí)現(xiàn)了下,就是略簡(jiǎn)單了點(diǎn),文中給出了完整的實(shí)例代碼,大家可以自行完善!!下面來一起看看吧。2016-11-11JavaScript判斷數(shù)字是否為質(zhì)數(shù)的方法匯總
這篇文章主要介紹了JavaScript判斷數(shù)字是否為質(zhì)數(shù)的方法匯總的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改view標(biāo)簽背景顏色功能示例【附demo源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改view標(biāo)簽背景顏色功能,涉及微信小程序事件響應(yīng)及數(shù)值運(yùn)算實(shí)現(xiàn)動(dòng)態(tài)設(shè)置view背景色樣式的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12JavaScript實(shí)現(xiàn)煙花特效(面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了JavaScript使用面向?qū)ο缶幊虒?shí)現(xiàn)煙花特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08JS中JSON對(duì)象和String之間的互轉(zhuǎn)及處理技巧
JSON:JavaScript 對(duì)象表示法(JavaScript Object Notation),其實(shí)JSON就是一個(gè)JavaScript的對(duì)象(Object)而已。接下來通過本文給大家介紹JS中JSON對(duì)象和String之間的互轉(zhuǎn)及處理技巧,需要的朋友一起學(xué)習(xí)吧2016-04-04layui使用templet格式化表格數(shù)據(jù)的方法
今天小編就為大家分享一篇layui使用templet格式化表格數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09