js实现tab切换效果
2019/6/27 21:09:43
本文主要是介绍js实现tab切换效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
效果如下:
代码如下:
<!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>js封装一个tab效果</title> <style type="text/css"> *{margin:0; padding:0;} body { font:12px/1.8 Arial; color:#666;} .wrapper { width:500px; border:1px solid #e6e6e6; margin:0 auto; padding:50px;} /*--=tabPanel--*/ #tab{border:1px solid #ccc;} #tab .tab-bd{border-top:none;margin:0 auto;padding:10px;text-align:left;height:120px;position:relative} .tab-nav{margin:0 auto;padding:0;background:#eee;height:26px;} .tab-nav li{display:inline;list-style:none outside none;width:90px;height:26px;float:left;line-height:26px;text-align:center;} .tab-nav li a{color:#555;display:inline-block} .tab-nav li a:hover,.tab-nav li.hover a{text-decoration:none;background:#fff;color:#000;display:block; } .hidden{display:none} </style> <script type="text/javascript"> function tabPanel(param){ var defaultIndex=param["default"]||0,//设置显示的页面 panelobj=param["panel"],//设置tab容器 defalutClass=param["defalutStyle"]||"",//设置tab菜单项的普通样式 hoverClass=param["hoverStyle"]||"hover",//设置鼠标移到tab菜单项的样式 currentIndex=defaultIndex, menus=_$(panelobj).getElementsByTagName("ul")[0].getElementsByTagName("li"), contents=_$(panelobj).getElementsByTagName("ul")[1].getElementsByTagName("li"), menuNumber=menus.length, hidden="hidden"; for(var i=0;i<menuNumber;i++){ _setClass(contents[0],hoverClass); _setClass(contents[i],hidden); _setClass(menus[i],defalutClass); (function(i){ menus[i].onmouseover=function(){ var old=menus[currentIndex]; _setClass(old,defalutClass); _setClass(contents[currentIndex],hidden); var cur=menus[i]; _setClass(cur,hoverClass); currentIndex=i; _setClass(contents[i],""); }; })(i); } _setClass(menus[currentIndex],hoverClass); _setClass(contents[currentIndex],""); //便利函数 function _setClass(obj,className){obj.className=className} function _$(oid){return typeof(oid) == "string"?document.getElementById(oid):oid} } </script> <body> <div class="wrapper"> <div id="tab"> <!-- tabHead --> <ul class="tab-nav"> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >交易安全</a></li> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >淘宝大学</a></li> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >爱心</a></li> </ul> <!-- tabPanel--> <ul class="tab-bd"> <li> 1111 </li> <li> 222 </li> <li> 333 </li> </ul> </div> <script type="text/javascript"> tabPanel({"panel":"tab"});//panel为必填项,default、defalutStyle、hoverStyle为选填项 </script> </div> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持找一找教程网!
这篇关于js实现tab切换效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南