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. .NET SkiaSharp 生成二維碼驗證碼及指定區域截取方法實現2. docker容器調用yum報錯的解決辦法3. 存儲于xml中需要的HTML轉義代碼4. CentOS郵件服務器搭建系列—— POP / IMAP 服務器的構建（ Dovecot ）5. phpstudy apache開啟ssi使用詳解6. django創建css文件夾的具體方法7. IntelliJ IDEA創建web項目的方法8. jsp網頁實現貪吃蛇小游戲9. javascript xml xsl取值及數據修改第1/2頁10. ASP中實現字符部位類似.NET里String對象的PadLeft和PadRight函數
網公網安備