鼠标虚滑过选项卡切换效果代码实例
分类:实例代码
分享一段代码实例,它实现了鼠标滑过,选项卡切换效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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="#">地址是pipipi.net</a></li> <li><a href="#">地址是pipipi.net</a></li> <li><a href="#">地址是pipipi.net</a></li> <li><a href="#">地址是pipipi.net</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>
鼠标虚滑过选项卡切换效果代码实例,这样的场景在实际项目中还是用的比较多的,关于鼠标虚滑过选项卡切换效果代码实例就介绍到这了。
鼠标虚滑过选项卡切换效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。