Version complète: jsB@nk » Menu » Navigation » Contenu Tabs script
URL: https://www.javascriptbank.com/content-tabs-script.html
Utilisez ce script polyvalent long de diviser le contenu de votre page en "virtuel" des sections, avec chaque section visible en cliquant sur un onglet correspondant. C'est un excellent moyen d'afficher votre contenu de manière interactive, moins écrasante à vos visiteurs.
Version complète: jsB@nk » Menu » Navigation » Contenu Tabs script
URL: https://www.javascriptbank.com/content-tabs-script.html
<style type=text/css>.dropcontent {DISPLAY: block}.tabstyle {BORDER-RIGHT: white 3px outset; BORDER-TOP: gray 1px solid; FONT: bold 14px Arial; WIDTH: 80px; CURSOR: hand; BACKGROUND-COLOR: lightyellow}.tabstyle B {MARGIN-LEFT: 3px; COLOR: blue; MARGIN-RIGHT: 23px}#cyclelinks2 {MARGIN-RIGHT: 15px}#cyclelinks2 .tabsfootstyle {FONT-WEIGHT: bold; MARGIN-RIGHT: 3px; BACKGROUND-COLOR: white; TEXT-DECORATION: none}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">if (window.addEventListener || window.attachEvent){document.write('<style type="text/css">\n')document.write('.dropcontent{display:none;}\n')document.write('</style>\n')}// Content Tabs script- By JavaScriptKit.com (http://www.javascriptkit.com)// Last updated: July 25th, 05'var showrecords=2 //specify number of contents to show per tabvar tabhighlightcolor="yellow" //specify tab color when selectedvar taboriginalcolor="lightyellow" //specify default tab color. Should echo your CSS file definition.////Stop editing here//////////////////////////////////////document.getElementsByClass=function(tag, classname){var tagcollect=document.all? document.all.tags(tag): document.getElementsByTagName(tag) //IE5 workaroundvar filteredcollect=new Array()var inc=0for (i=0;i<tagcollect.length;i++){if (tagcollect[i].className==classname)filteredcollect[inc++]=tagcollect[i]}return filteredcollect}function contractall(){var inc=0while (contentcollect[inc]){contentcollect[inc].style.display="none"inc++}}function expandone(whichpage){var lowerbound=(whichpage-1)*showrecordsvar upperbound=(tabstocreate==whichpage)? contentcollect.length-1 : lowerbound+showrecords-1contractall()for (i=lowerbound;i<=upperbound;i++)contentcollect[i].style.display="block"}function highlightone(whichtab){for (i=0;i<tabscollect.length;i++){tabscollect[i].style.backgroundColor=taboriginalcolortabscollect[i].style.borderRightColor="white"tabsfootcollect[i].style.backgroundColor="white"}tabscollect[whichtab].style.backgroundColor=tabhighlightcolortabscollect[whichtab].style.borderRightColor="gray"tabsfootcollect[whichtab].style.backgroundColor="#E8E8E8"}function generatetab(){contentcollect=document.getElementsByClass("p", "dropcontent")tabstocreate=Math.ceil(contentcollect.length/showrecords)linkshtml=""linkshtml2=""for (i=1;i<=tabstocreate;i++){linkshtml+='<span class="tabstyle" onClick="expandone('+i+');highlightone('+(i-1)+')"><b>Page '+i+'</b></span>'linkshtml2+='<a href="#" class="tabsfootstyle" onClick="expandone('+i+');highlightone('+(i-1)+');return false">Page '+i+'</a> '}document.getElementById("cyclelinks").innerHTML=linkshtmldocument.getElementById("cyclelinks2").innerHTML=linkshtml2tabscollect=document.getElementsByClass("span", "tabstyle")tabsfootcollect=document.getElementsByClass("a", "tabsfootstyle")highlightone(0)expandone(1)}if (window.addEventListener)window.addEventListener("load", generatetab, false)else if (window.attachEvent)window.attachEvent("onload", generatetab)</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="cyclelinks"></div><p class="dropcontent">Content 1 here.</p><p class="dropcontent">Content 2 here.</p><p class="dropcontent">Content 3 here.</p><div id="cyclelinks2" align="right"></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->