Implementing Tab Switching Effect with JavaScript

The effect is as follows:

The code is as follows:

<!DOCTYPE html > 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Wrap a tab effect in JavaScript</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,//Set the displayed page
 panelobj=param["panel"],//Set tab container
 defalutClass=param["defalutStyle"]||"",//Set the normal style of the tab menu item
 hoverClass=param["hoverStyle"]||"hover",//Set the style of the tab menu item when the mouse is over
 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],"
 //Convenience function
 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" >Transaction Safety</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Taobao University</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Love</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 is a required item, default, defalutStyle, hoverStyle are optional items
</script>
</div>
</body> 
</html>

That's all for this article. I hope the content of this article can bring some help to everyone's learning or work, and I also hope to get more support for the Shouting Tutorial!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial