« »

Hiệu ứng tạo một trình đơn với các mục chọn giống như các tab và mỗi tab sẽ có một màu khác nhau khi bạn rê hoặc nhấp chuột vào các mục chọn này.

Nhãn: Menu dạng các tab

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Mã nguồn
Files
CSS
JavaScript
HTML
In

Copy All x2

<link rel="stylesheet" href="ttStyle.css" type="text/css">
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="JavaScript" type="text/javascript">
// Toggle Tab Menus script - Ã�Â© 2004 Mircea Baldean
// Version 1.1, release 09/01/2004

var tabProp = new Array() 
/*
    Tab Menu properties: 
	Add new tab menus using this convention
	tabProp[No] = new Array("tabMenuNo",	"tabCaption",	"#tabBgColor",	"tabContNo") 
*/
tabProp[0] = new Array("tabMenu0",	"Lorem",		"#B3E7FF",	"tabCont0") 
tabProp[1] = new Array("tabMenu1",	"Odio",	"#FFFFCC",	"tabCont1") 
tabProp[2] = new Array("tabMenu2",	"Sed",	"#DFD5FF",	"tabCont2") 
tabProp[3] = new Array("tabMenu3",	"Viverra",		"#CCFFCC",	"tabCont3") 
//tabProp[4] = new Array("tabMenu4",	"Caption",	"#FFFFFF",	"tabCont4") 
//tabProp[5] = new Array("tabMenu5",	"Caption",	"#FFFFFF",	"tabCont5") 
//tabProp[6] = new Array("tabMenu6",	"Caption",	"#FFFFFF",	"tabCont6") 
//tabProp[7] = new Array("tabMenu7",	"Caption",	"#FFFFFF",	"tabCont7") 
//tabProp[8] = new Array("tabMenu8",	"Caption",	"#FFFFFF",	"tabCont8") 
//tabProp[9] = new Array("tabMenu9",	"Caption",	"#FFFFFF",	"tabCont9") 


// Set-up Parameters
var menuBgColorOff		= "#EDEDED";						//Default shaded colour
var menuBorderColor		= "#AAAAAA";						//Border colour
var menuWidth			= "100px";							//Tab Menu width
var menuHeight			= "24px";							//Tab Menu height
var menuSpacing			= "20px";							//Tab Manu spacing
var menuLeftOffset		= "20px";							//Offset first Tab Menu
var menuSelected		= 0;								//Selected Tab Menu by default: 0, 1, ...
var menuBorderStyle 	= "1px solid";						//Do not change
var menuVerifyWidth		= 1;								//Check to see if menus overflow content width

var menuFontFamily 		= "Arial, Helvetica, sans-serif";	//Font Family for tab menus
var menuFontSize		= "13px";							//Font Size for tab menus
var menuFontColorOff	= "#0000FF";						//Font Colour for un-selected tab menus
var menuFontColorOn		= "#000000";						//Font Colour for current menu

var contentWidth 		= "500px";							//Content window width
var contentHeight 		= "186px";							//Content window  height
var contentFontFamily 	= "Arial, Helvetica, sans-serif";	//Content window font family
var contentFontSize		= "13px";							//Content window font size
var contentFontColor	= "#000000";						//Content window font colour
var contentPadding		= "4px";							//Content window padding
</script>
<script language="JavaScript" type="text/javascript" src="ttApi.js"></script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<body onload="ttInitTabs();">
<div id="tabHolder"> 
  <div id="tabOffset">&nbsp;</div>
  <script type="text/javascript" language="JavaScript">ttMenuDisplay();</script>
  <br style="clear: both;">
  <div id="tabContent" class="tabContent"> 
    <!-- Toggle Tab Content Start: name 'div' tags as 'tabCont0', 'tabCont1', 'tabCont2', ... -->

    <div id="tabCont0">Lorem ipsum dolor sit amet, et venenatis est nam blandit 
		a, in velit aliquam libero amet faucibus mauris, ipsum turpis tellus 
		urna, animi arcu neque etiam. Eaque tincidunt enim nibh aliquam magnis 
		tellus. Duis faucibus ullamcorper volutpat eleifend pulvinar. Elit risus 
		consectetuer vestibulum tincidunt et tempor, curabitur elementum 
		aliquam, torquent non suscipit phasellus. Et enim autem est, lacus 
		egestas elit dolor quam, eros viverra arcu massa fusce leo et, lectus 
		massa lectus laoreet lacus vestibulum, volutpat metus quis.</div>
    <div id="tabCont1">Odio libero nemo, natoque velit. Urna pede. Fusce est 
		sodales pellentesque aliquet. Pellentesque dui mauris nisi odio velit a, 
		eu eget vulputate eu erat leo, pretium ut, luctus potenti libero ut 
		magna per pellentesque. Id urna, vestibulum vel vestibulum risus lectus. 
		Sed id. Felis tempor placerat, corporis sollicitudin, nisl eget quam 
		tortor nibh aliquam cursus. Sodales tellus eros. Sed praesent feugiat, 
		at fringilla in gravida magna tellus. Fermentum cras est mauris amet sed 
		ultricies, donec luctus id, amet amet phasellus, et imperdiet eu arcu 
		venenatis, velit pretium diam aliquam tellus.</div>
    <div id="tabCont2">Sed sit hendrerit. Taciti maecenas vitae porta aenean 
		adipiscing. Nostra sodales, malesuada interdum tincidunt quis nulla 
		proin, suscipit ut augue justo mi, ea neque, vulputate et fringilla 
		euismod. Sed massa dictum vivamus. Ipsum interdum in, tincidunt in 
		justo, ac commodo facilisis felis. Volutpat placerat at consequat 
		accumsan, quis ante leo libero eget cras quisque, sapien ligula id ac 
		ultricies eu pellentesque, orci facilisi at sollicitudin ullamcorper, 
		sed rutrum tincidunt sed. Diam fringilla quam sit pellentesque mattis 
		possimus. Fames mollis dictum ut pellentesque, elit hac massa ante, eget 
		tellus lorem suspendisse mauris, leo arcu wisi, nulla diam. Litora magna 
		purus cursus donec nascetur nec, amet vitae, amet dignissim.</div>
    <div id="tabCont3">Viverra adipiscing lorem eget in massa ultrices. Ea donec 
		orci voluptate venenatis commodi, iusto nulla duis lobortis qui, iaculis 
		laborum auctor sit sociosqu, eros nullam amet et, vitae vivamus 
		hendrerit nisl elit. Fermentum penatibus eget neque, faucibus commodo 
		vivamus. Accumsan risus ornare nunc semper, sed et interdum augue, erat 
		vel venenatis in. Eget potenti amet non diam vitae, nulla quis pulvinar 
		sodales tempor suscipit a, aliquam aenean nec beatae nullam molestie 
		dolor, praesent ab, nisl pellentesque facilisis urna convallis nec ut. 
		Dignissim suspendisse a, nam molestie pretium quisque fusce ut, turpis 
		sed, ad neque ligula a. Erat pellentesque, dis pede. Neque curae risus 
		sed non vitae. Felis non, dictumst dolor. Iaculis risus sit a, vulputate 
		suspendisse. Sem molestie et dictumst vulputate turpis eget, mauris 
		vestibulum.</div>
    <div id="tabCont4"></div>
    <div id="tabCont5"></div>
    <div id="tabCont6"></div>

    <div id="tabCont7"></div>
    <div id="tabCont8"></div>
    <div id="tabCont9"></div>
    <!-- Toggle Tab Content End -->
  </div>
</div>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->