»
AnglaisFran�aisVietnamien

Imprimer - Contenu Tabs script - JavaScriptBank.com

Version compl�te: jsB@nk » Menu » Navigation » Contenu Tabs script
URL: https://www.javascriptbank.com/content-tabs-script.html

Contenu Tabs script © JavaScriptBank.comUtilisez 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



CSS
<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-->


JavaScript
<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-->


HTML
<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-->