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. IntelliJ IDEA設(shè)置條件斷點(diǎn)的方法步驟2. Python使用oslo.vmware管理ESXI虛擬機(jī)的示例參考3. Java構(gòu)建JDBC應(yīng)用程序的實(shí)例操作4. Express 框架中使用 EJS 模板引擎并結(jié)合 silly-datetime 庫(kù)進(jìn)行日期格式化的實(shí)現(xiàn)方法5. javascript設(shè)計(jì)模式 ? 建造者模式原理與應(yīng)用實(shí)例分析6. IDEA EasyCode 一鍵幫你生成所需代碼7. 一篇文章帶你了解JavaScript-對(duì)象8. ThinkPHP5 通過(guò)ajax插入圖片并實(shí)時(shí)顯示(完整代碼)9. 解決Python paramiko 模塊遠(yuǎn)程執(zhí)行ssh 命令 nohup 不生效的問(wèn)題10. python flask框架快速入門
網(wǎng)公網(wǎng)安備