JavaScript Tab菜單實現過程解析
Tab 選項卡切換效果在現如今的網頁中，運用的也是比較多的，包括點擊切換、滑動切換、延遲切換、自動切換等多種效果
代碼如下
<!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>
程序的運行效果如下：鼠標點擊Tab標簽，實現標簽變色效果，下邊的內容變成相應的標簽內容．
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. Docker 部署 Prometheus的安裝詳細教程2. Python使用oslo.vmware管理ESXI虛擬機的示例參考3. IntelliJ IDEA設置條件斷點的方法步驟4. Ajax引擎 ajax請求步驟詳細代碼5. IDEA EasyCode 一鍵幫你生成所需代碼6. Java構建JDBC應用程序的實例操作7. javascript設計模式 ? 建造者模式原理與應用實例分析8. 一篇文章帶你了解JavaScript-對象9. ThinkPHP5 通過ajax插入圖片并實時顯示(完整代碼)10. Spring應用拋出NoUniqueBeanDefinitionException異常的解決方案
網公網安備