滑鼠虛滑過選項卡切換效果程式碼例項
分享一段程式碼例項,它實現了滑鼠滑過,選項卡切換效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; list-style: none; font-size: 12px; } .tab { width: 298px; height: 98px; margin: 10px; border: 1px solid #eee; overflow: hidden; } .tab-title { height: 27px; position: relative; background: #f7f7f7; } .tab-title ul { position: absolute; width: 301px; left: -1px; } .tab-title li { float: left; width: 58px; height: 26px; line-height: 26px; text-align: center; padding: 0 1px; border-bottom: 1px solid #eee; overflow: hidden; } .tab li a:link, .tab li a:visited { text-decoration: none; color: #000; } .tab li a:hover { color: #f90; font-weight: 700; } .tab-title li.select { background: #fff; border-bottom-color: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; padding: 0; } .tab .tab-content .tabct { margin: 10px 10px 10px 19px; } .tab .tab-content .tabct ul li { float: left; width: 134px; height: 25px; overflow: hidden; } </style> <script> function $(id) { return typeof id == "string" ? document.getElementById(id) : id; } window.onload = function() { var titleName = $("tab-title").getElementsByTagName("li"); var tabContent = $("tab-content").getElementsByTagName("div"); if (titleName.length != tabContent.length) { return; } for (var index = 0; index < titleName.length; index++) { titleName[index].id = index; titleName[index].onmouseover = function () { for (var j = 0; j < titleName.length; j++) { titleName[j].className = ""; tabContent[j].style.display = "none" } this.className = "select"; tabContent[this.id].style.display = "block"; } } } </script> </head> <body> <div class="tab" id="tab"> <div class="tab-title" id="tab-title"> <ul> <li class="select"><a href="#">css教程</a></li> <li><a href="#">div教程</a></li> <li><a href="#">js教程</a></li> <li><a href="#">css3教程</a></li> <li><a href="#">json教程</a></li> </ul> </div> <div class="tab-content" id="tab-content"> <div class="tabct" style="display:block"> <ul> <li><a href="#">地址是softwhy.com</a></li> <li><a href="#">地址是softwhy.com</a></li> <li><a href="#">地址是softwhy.com</a></li> <li><a href="#">地址是softwhy.com</a></li> </ul> </div> <div class="tabct" style="display:none"> <ul> <li><a href="#">螞蟻部落歡迎您</a></li> <li><a href="#">螞蟻部落歡迎您</a></li> <li><a href="#">螞蟻部落歡迎您</a></li> <li><a href="#">螞蟻部落歡迎您</a></li> </ul> </div> <div class="tabct" style="display:none"> <ul> <li><a href="#">努力才會有美好的未來</a></li> <li><a href="#">努力才會有美好的未來</a></li> <li><a href="#">努力才會有美好的未來</a></li> <li><a href="#">努力才會有美好的未來</a></li> </ul> </div> <div class="tabct" style="display:none"> <ul> <li><a href="#">提供免費的基礎進階教程</a></li> <li><a href="#">提供免費的基礎進階教程</a></li> <li><a href="#">提供免費的基礎進階教程</a></li> <li><a href="#">提供免費的基礎進階教程</a></li> </ul> </div> <div class="tabct" style="display: none"> <ul> <li><a href="#">本站位於青島市南區</a></li> <li><a href="#">本站位於青島市南區</a></li> <li><a href="#">本站位於青島市南區</a></li> <li><a href="#">本站位於青島市南區</a></li> </ul> </div> </div> </div> </body> </html>
相關文章
- jQuery選項卡切換圖片效果程式碼例項jQuery
- tab選項卡切換例項程式碼
- js左右滑動選項卡效果程式碼例項JS
- js內容左右滑動切換的選項卡程式碼例項JS
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- 滑鼠滑過實現淡入淡出效果程式碼例項
- jQuery tab選項卡效果程式碼例項jQuery
- 滑鼠滑過圖片出現光弧效果程式碼例項
- JavaScript多級選項卡效果程式碼例項JavaScript
- jquery實現的選項卡效果例項程式碼jQuery
- js實現的垂直選項卡效果程式碼例項JS
- jQuery選項卡例項程式碼jQuery
- CSS滑鼠經過連結切換背景圖片例項程式碼CSS
- CSS3滑過光束效果程式碼例項CSSS3
- JavaScript左右滑動切換的選項卡詳解JavaScript
- select下拉選單項互換效果程式碼例項
- 物件導向實現的tab選項卡效果程式碼例項物件
- 純css tab選項卡程式碼例項CSS
- js選項卡簡單程式碼例項JS
- 原生js tab選項卡程式碼例項JS
- 圖片滑過亮光光弧效果程式碼例項
- 如何實現選項卡切換
- 滑鼠懸浮評分效果程式碼例項
- 滑鼠滑過實現table表格行背景變色程式碼例項
- css背景虛化效果程式碼例項CSS
- jQuery實現的tab選項卡程式碼例項jQuery
- css實現滑鼠滑過切換背景圖片程式碼CSS
- CSS實現的滑鼠滑過改變連結文字例項程式碼CSS
- css滑鼠懸浮tips效果程式碼例項CSS
- 滑鼠懸浮實現翻牌效果程式碼例項
- 遮蔽滑鼠右鍵選單例項程式碼單例
- JavaScript點選投票效果程式碼例項JavaScript
- 通過滑鼠拖動選取指定數字程式碼例項
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- 純css實現的tab選項卡程式碼例項CSS
- css3實現tab選項卡程式碼例項CSSS3
- 導航欄背景切換程式碼例項
- jquery實現的滑動軸效果程式碼例項jQuery