کد
<!--***************| gpgtools.blogsky.com|*************** --> <style type="text/css"> #tablist{ padding: 3px 0; margin-left: 0; margin-bottom: 0; margin-top: 0.1em; font: bold 12px Verdana; } #tablist li{ list-style: none; display: inline; margin: 0; } #tablist li a{ text-decoration: none; padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: white; } #tablist li a:link, #tablist li a:visited{ color: navy; } #tablist li a.current{ background: lightyellow; } #tabcontentcontainer{ width:480px; height:40px; } .tabcontent{ display:none; } </style> <script type="text/javascript"> /*********************************************** * DD Tab Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ //Set tab to intially be selected when page loads: //[which tab (1=first tab), ID of tab content to display]: var initialtab=[1, "sc1"] var previoustab="" function expandcontent(cid, aobject){ if (document.getElementById){ highlighttab(aobject) if (previoustab!="") document.getElementById(previoustab).style.display="none" document.getElementById(cid).style.display="block" previoustab=cid } } function highlighttab(aobject){ if (typeof tabobjlinks=="undefined") collecttablinks() for (i=0; i<tabobjlinks.length; i++) tabobjlinks[i].className="" aobject.className="current" } function collecttablinks(){ var tabobj=document.getElementById("tablist") tabobjlinks=tabobj.getElementsByTagName("A") } function do_onload(){ collecttablinks() expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1]) } if (window.addEventListener) window.addEventListener("load", do_onload, false) else if (window.attachEvent) window.attachEvent("onload", do_onload) else if (document.getElementById) window.onload=do_onload </script> step2:copy this code to body <ul id="tablist"> <li><a href="http://www.dynamicdrive.com/" onMouseover="expandcontent('sc1', this)">Dynamic Drive</a></li> <li><a href="http://www.javascriptkit.com/" onMouseover="expandcontent('sc2', this)">JavaScript Kit</a></li> <li><a href="http://www.codingforums.com/" onMouseover="expandcontent('sc3', this)">CodingForums</a></li> <li><a href="http://www.webmasterpick.com/" onMouseover="expandcontent('sc4', this)">WebmasterPick</a></li> </ul> <DIV id="tabcontentcontainer"> <div id="sc1" class="tabcontent"> Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br /> <a href="http://www.dynamicdrive.com/dynamicindex1/">Menu and Navigation</a> | <a href="http://www.dynamicdrive.com/dynamicindex2/">Scrollers</a> | <a href="http://www.dynamicdrive.com/dynamicindex16/"> | <a href="http://www.dynamicdrive.com/dynamicindex16/">Links & tooltips</a> | <a href="http://www.dynamicdrive.com/dynamicindex14/">Image Slideshows</a> </div> <div id="sc2" class="tabcontent"> <a href="http://www.javascriptkit.com/">Home</a> | <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a> | <a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a> | <a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS tutorials</a> </div> <div id="sc3" class="tabcontent"> Web Coding and discussions forum. Visit <a href="http://www.codingforums.com/">Coding Forums</a> for help on JavaScript, CSS, PHP, XML, and more. </div> <div id="sc4" class="tabcontent"> <a href="http://www.webmasterpick.com/">Webmaster Pick</a> features free and useful webmaster resources. Check out their useful <a href="http://www.webmasterpick.com/gifoptimize/">Gif Optimizer</a>. </div> </DIV> <!--***************| gpgtools.blogsky.com|*************** -->