漂亮简洁可暂定滚动的TAB标签代码,Css代码库,德仔网

代码语言
代码分类
【Css】漂亮简洁可暂定滚动的TAB标签
作者:Dezai.CN / 发布于2012/4/17/ 673
<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>漂亮简洁可暂定滚动的TAB标签(选项卡)代码 - <a href="http://www.6a8a.com</title">www.6a8a.com</title</a>></div>
<div><style type="text/css">
body {font-family:Arial, Helvetica, sans-serif; font-size:11px;}
/*Example for a Menu Style*/
.menu {background-color:#008bd3;border-bottom:1px solid #d7d7d7; height:23px;width:300px;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#ffffff; text-decoration:none; padding:5px 5px 6px 5px; }
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; color:#000000; background-color:#ffffff; font-weight:bold; position:relative;}
#tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4,#anothercontent1,#anothercontent2, #anothercontent3, #anothercontent4,#anothercontent5, #anothercontent6 {border:1px solid #ececec; width:298px; text-align:center;padding:6px 0px; font-size:12px; margin-bottom:5px;}
</style></div>
<div>
<script type="text/javascript">
 /*
 EASY TABS 1.2 Produced and Copyright by Koller Juergen
 <a href="http://www.kollermedia.at">www.kollermedia.at</a> | <a href="http://www.austria-media.at">www.austria-media.at</a>
 Need Help? http:/www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange
 You can use this Script for private and commercial Projects, but just leave the two credit lines, thank you.
 */</div>
<div> //EASY TABS 1.2 - MENU SETTINGS
 //Set the id names of your tablinks (without a number at the end)
 var tablink_idname = new Array("tablink", "anotherlink")
 //Set the id names of your tabcontentareas (without a number at the end)
 var tabcontent_idname = new Array("tabcontent", "anothercontent")
 //Set the number of your tabs in each menu
 var tabcount = new Array("4", "6")
 //Set the Tabs wich should load at start (In this Example:Menu 1 -> Tab 2 visible on load, Menu 2 -> Tab 5 visible on load)
 var loadtabs = new Array("2", "5")
 //Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0)
 var autochangemenu = 2;
 //the speed in seconds when the tabs should change
 var changespeed = 3;
 //should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
 var stoponhover = 0;
 //END MENU SETTINGS</div>
<div>
 /*Swich EasyTabs Functions - no need to edit something here*/
 function easytabs(menunr, active) { if (menunr == autochangemenu) { currenttab = active; } if ((menunr == autochangemenu) && (stoponhover == 1)) { stop_autochange() } else if ((menunr == autochangemenu) && (stoponhover == 0)) { counter = 0; } menunr = menunr - 1; for (i = 1; i <= tabcount[menunr]; i++) { document.getElementById(tablink_idname[menunr] + i).className = 'tab' + i; document.getElementById(tabcontent_idname[menunr] + i).style.display = 'none'; } document.getElementById(tablink_idname[menunr] + active).className = 'tab' + active + ' tabactive'; document.getElementById(tabcontent_idname[menunr] + active).style.display = 'block'; } var timer; counter = 0; var totaltabs = tabcount[autochangemenu - 1]; var currenttab = loadtabs[autochangemenu - 1]; function start_autochange() { counter = counter + 1; timer = setTimeout("start_autochange()", 1000); if (counter == changespeed + 1) { currenttab++; if (currenttab > totaltabs) { currenttab = 1 } easytabs(autochangemenu, currenttab); restart_autochange(); } } function restart_autochange() { clearTimeout(timer); counter = 0; start_autochange(); } function stop_autochange() { clearTimeout(timer); counter = 0; }
<div> window.onload = function() {
 var menucount = loadtabs.length; var a = 0; var b = 1; do { easytabs(b, loadtabs[a]); a++; b++; } while (b <= menucount);
 if (autochangemenu != 0) { start_autochange(); }
 }
</script>
</head></div>
<div>
<body>
<h2>Easy Tabs 1.2 - Example with 1 normal and 1 changing Menu</h2></div>
<div><!--Start of the Tabmenu 1 -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;" title="" id="tablink1">Tab 1</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;" title="" id="tablink2">Tab 2 </a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;" title="" id="tablink3">Tab 3 </a></li>
<li><a href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;" title="" id="tablink4">Tab 4 </a>
</li>
</ul>
</div>
<!--End of the Tabmenu 1 --></div>
<div>
<!--Start Tabcontent 1 -->
<div id="tabcontent1">Tabcontent 1</div>
<!--End Tabcontent 1--></div>
<div><!--Start Tabcontent 2-->
<div id="tabcontent2">Tabcontent 2</div>
<!--End Tabcontent 2 --></div>
<div><!--Start Tabcontent 3-->
<div id="tabcontent3">Tabcontent 3</div>
<!--End Tabcontent 3--></div>
<div><!--Start Tabcontent 4-->
<div id="tabcontent4">Tabcontent 4</div>
<!--End Tabcontent 4--></div>
<div>
<br/><br/></div>
<div><!--Start of the Tabmenu 2 -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('2', '1');" onfocus="easytabs('2', '1');" onclick="return false;" title="" id="anotherlink1">Tab 1</a></li>
<li><a href="#" onmouseover="easytabs('2', '2');" onfocus="easytabs('2', '2');" onclick="return false;" title="" id="anotherlink2">Tab 2</a></li>
<li><a href="#" onmouseover="easytabs('2', '3');" onfocus="easytabs('2', '3');" onclick="return false;" title="" id="anotherlink3">Tab 3</a></li>
<li><a href="#" onmouseover="easytabs('2', '4');" onfocus="easytabs('2', '4');" onclick="return false;" title="" id="anotherlink4">Tab 4</a></li>
<li><a href="#" onmouseover="easytabs('2', '5');" onfocus="easytabs('2', '5');" onclick="return false;" title="" id="anotherlink5">Tab 5</a></li>
<li><a href="#" onmouseover="easytabs('2', '6');" onfocus="easytabs('2', '6');" onclick="return false;" title="" id="anotherlink6">Tab 6</a></li>
</ul>
</div>
<!--End of the Tabmenu 2 --></div>
<div>
<!--Start Tabcontent 1 -->
<div id="anothercontent1">Tabcontent 1</div>
<!--End Tabcontent 1--></div>
<div><!--Start Tabcontent 2-->
<div id="anothercontent2">Tabcontent 2</div>
<!--End Tabcontent 2 --></div>
<div><!--Start Tabcontent 3-->
<div id="anothercontent3">Tabcontent 3</div>
<!--End Tabcontent 3--></div>
<div><!--Start Tabcontent 4-->
<div id="anothercontent4">Tabcontent 4</div>
<!--End Tabcontent 4--></div>
<div><!--Start Tabcontent 5-->
<div id="anothercontent5">Tabcontent 5</div>
<!--End Tabcontent 5--></div>
<div><!--Start Tabcontent 6-->
<div id="anothercontent6">Tabcontent 6</div>
<!--End Tabcontent 6--></div>
<div>
<a href="#" onmousedown="javascript:stop_autochange(); return false;">Stop the Change</a> | <a href="#" onmousedown="javascript:restart_autochange(); return false;">Restart (if stopped)</a>
<div style="background-color:#efefef; margin-top:25px; padding:8px;">
 <strong>Settings setted for this menu:</strong><br/>
 <strong>loadtabs = 2, 5 </strong> (load tab 2 in first menu and tab 5 in second menu at start)<br/>
 <strong>autochangemenu = 2 </strong>(set the second menu to autochange - if you want the first menu to autochange just set this to 1)<br/>
 <strong>changespeed = 3 </strong>(change every 3 seconds)<br/>
 <strong>stoponhover = 0 </strong>(don't stop the autochange on hover)
</div></div>
<div></body>
</html>
</div>
试试其它关键字
　TAB标签　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)