Easy tabs for SharePoint 2010:
how to apply: first create web part page in SharePoint and then add page viewer web part in the site and edit source content and past the following code:
<style type=”text/css”><style type=”text/css”>.et-tab { CURSOR: pointer; FONT-SIZE: 8pt; BACKGROUND: url(/_layouts/images/selbg.png) repeat-x; FONT-WEIGHT: bold; PADDING-BOTTOM: 12px; PADDING-TOP: 12px; PADDING-LEFT: 12px; DISPLAY: inline-block; PADDING-RIGHT: 12px}.et-activetab { FONT-SIZE: 16px; BORDER-TOP: #006600 1px solid; BORDER-RIGHT: #006600 1px solid; BORDER-BOTTOM: #006600 1px solid; COLOR: #ffffff; BORDER-LEFT: #006600 1px solid; BACKGROUND-COLOR: #006600; align: center}.et-inactivetab { FONT-SIZE: 16px; BORDER-TOP: #009933 1px solid; BORDER-RIGHT: #009933 1px solid; BORDER-BOTTOM: #009933 1px solid; COLOR: #ffffff; BORDER-LEFT: #009933 1px solid; BACKGROUND-COLOR: #009933}.et-separator { HEIGHT: 5px; BACKGROUND-COLOR: #006600}.et-tabrow { WHITE-SPACE: nowrap}.et-offscreen { MAX-WIDTH: 1px; POSITION: absolute; TOP: -9999px; MAX-HEIGHT: 1px}</style>
Then inside script tags add the following code:
/* Easy Tabs v 5.0.1 */(function(){var AP=””,sec=0,Header=”none”,Split=”No”,Expand=””,Print=””;if (document.forms[0].elements[“_wikiPageMode.value”]==”true”||document.forms[0].elements[“MSOLayout_InDesignMode”].value==”1″){return;}var el=document.getElementsByTagName(“SCRIPT”),p=el[el.length-1],sT,a,sep,tabRow;do {p=p.parentNode;sT=p.innerHTML.split(“MSOZoneCell_WebPart”);}while (sT.length=0||up.parentNode.innerHTML.indexOf(‘id=”WebPart’+WPid+'” ‘)>=0){WPid=”et”+WPid;etHeader[WPid]=up;etRoot[WPid]=children[j];etTab[WPid]=d[i].getElementsByTagName(“span”)[0].cloneNode(true);etTab[WPid].id=WPid;etTab[WPid].className=”et-tab et-inactivetab”;etTab[WPid].onclick=function(){activateTab(this);};tabRow.appendChild(etTab[WPid]);tabsID.push(WPid);break;}up=up.parentNode;}}}}}catch(e){}}var Tabs=tabRow.getElementsByTagName(“span”),TabCount=Tabs.length;if (Split==”Yes”) {var sd=document.createElement(“div”),index=Math.floor(TabCount*0.5);tabRow.insertBefore(sd,Tabs[index]);}if(AP.length && sec>0) {sec=sec*1000;interval=””;a=document.createElement(“span”);a.innerHTML=”|>”;a.className=”et-tab et-inactivetab”;a.onclick=function(){if(interval==””){this.innerHTML=”||”;interval=window.setInterval(function(){Autoplay();},sec)}else{this.innerHTML=”|>”;window.clearInterval(interval);interval=””}};tabRow.appendChild(a);var Autoplay=function(){for(i=0;i
Life Coders 
This code assumes that we want our tab colors based on a Boolean choice; active or inactive. Is there a way to write the code where we want the tab colors static, regardless of whether or not it’s active? I’m trying to incorporate this on a web parts page where each tab is a different Content Editor Web Part. The only reason I am doing this is because I will not be maintaining the content and the users are not strong enough in HTML to edit code.
LikeLike