Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Tab nội dung
URL: https://www.javascriptbank.com/content-tabs-script.html
Nếu website của bạn có nhiều chủ đề, bạn có thể dùng đoạn script này để phân chia chủ đề thành nhiều tab nhằm tiết kiệm không gian. Mỗi khi cần thì người dùng chỉ cần nhấp chọn chủ đề mình cần xem.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Tab nội dung
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-->