⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 example_one_menu.html

📁 Tabl 页面 利用JS+HTML做的一个Tab页面。
💻 HTML
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Easy Tabs 1.2 - presented by Kollermedia.at</title>
<link href="menu.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" language="javascript" src="easytabs.js"></script>
</head>


<body>
<h2>Easy Tabs 1.2 - Example with 1 changing Menu (css and js in external files)</h2>

<!--Start of the Tabmenu1 -->
<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 Tabmenu1 -->


<!--Start Tabcontent 1 -->
<div id="tabcontent1">Tabcontent 1</div>
<!--End Tabcontent 1-->

<!--Start Tabcontent 2-->
<div id="tabcontent2">Tabcontent 2</div>
<!--End Tabcontent 2 -->

<!--Start Tabcontent 3-->
<div id="tabcontent3">Tabcontent 3</div>
<!--End Tabcontent 3-->

<!--Start Tabcontent 4-->
<div id="tabcontent4">Tabcontent 4</div>
<!--End Tabcontent 4-->

<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</strong> (load tab 2 on start)<br/>
<strong>autochangemenu = 1 </strong>(set the first menu to autochange modus (in this example there is only one menu so i have to set it to 1 or to 0 if i dont want a autochangemenu)<br/>
<strong>changespeed = 3 </strong>(change every 3 seconds)<br/>
<strong>stoponhover = 0 </strong>(don't stop the autochange on hover)</div>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -