JavaScript Tab菜單實(shí)現(xiàn)過(guò)程解析
Tab 選項(xiàng)卡切換效果在現(xiàn)如今的網(wǎng)頁(yè)中，運(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' onclick='tab(this)'>menu1</div> <div xxx='c2' onclick='tab(this)'>menu2</div> <div xxx='c3' onclick='tab(this)'>menu3</div></div><div id='bottomMenu'> <div class='current-content'>content1</div> <div class='hide'>content2</div> <div 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í)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. JSP數(shù)據(jù)交互實(shí)現(xiàn)過(guò)程解析2. jsp實(shí)現(xiàn)登錄界面3. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法4. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫(huà)特效5. 刪除docker里建立容器的操作方法6. 概述IE和SQL2k開(kāi)發(fā)一個(gè)XML聊天程序7. XML入門的常見(jiàn)問(wèn)題(二)8. asp批量添加修改刪除操作示例代碼9. jsp+servlet實(shí)現(xiàn)猜數(shù)字游戲10. jsp實(shí)現(xiàn)簡(jiǎn)單用戶7天內(nèi)免登錄
網(wǎng)公網(wǎng)安備