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. HTML5 Canvas繪制圖形從入門(mén)到精通2. .NET6打包部署到Windows Service的全過(guò)程3. WML語(yǔ)言的基本情況4. 刪除docker里建立容器的操作方法5. 利用CSS制作3D動(dòng)畫(huà)6. ThinkPHP5 通過(guò)ajax插入圖片并實(shí)時(shí)顯示(完整代碼)7. AJAX原理以及axios、fetch區(qū)別實(shí)例詳解8. XML入門(mén)的常見(jiàn)問(wèn)題(四)9. layui的checbox在Ajax局部刷新下的設(shè)置方法10. Properties 持久的屬性集的實(shí)例詳解
網(wǎng)公網(wǎng)安備