本文目录一览：
- 1、求一个tab菜单的js 源码
- 2、关于鼠标经过切换tab的js代码问题
- 3、如何用js代码写一个tab选项卡
- 4、我想给这段JS鼠标滑动 自动切换TAB的时候设置一个延迟时间，请问如何操作？时间大概是300毫秒，代码如下
- 5、JS实现Tab切换，超简单只有几行代码
求一个tab菜单的js 源码
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
script type="text/javascript" src="jquery-1.4.3.min.js"/script
style type="text/css"
.clear{clear:both;}
.nav{background-color:#CCFF00;width:500px;font-size:20px;}
.nav .tab{background-color:#cccccc;color:#333333;padding-left:5px;padding-right:5px;}
.nav .tab_active{background-color:#ffffff;color:#333333;padding-left:5px;padding-right:5px;}
/style
/head
body
div class="nav"
a href="javascript:;" class="tab_active" id="tab_1" onmouseover="changeTab('1');"汇总/a
a href="javascript:;" class="tab" id="tab_2" onmouseover="changeTab('2');"22222/a
a href="javascript:;" class="tab" id="tab_3" onmouseover="changeTab('3');"33333/a
a href="javascript:;" class="tab" id="tab_4" onmouseover="changeTab('4');"44444/a
div class="clear"/div
/div
div id="pages_1" class="pages_1" style="display:block;"图片列表1/div
div id="pages_2" class="pages_2" style="display:none;"图片列表2/div
div id="pages_3" class="pages_3" style="display:none;"图片列表3/div
div id="pages_4" class="pages_4" style="display:none;"图片列表4/div
/body
/html
script type="text/javascript"
var global_active_tab="1"
function changeTab(tab){
$("#pages_"+global_active_tab).css("display","none");
$("#tab_"+global_active_tab).attr("class","tab");
global_active_tab=tab
$("#pages_"+global_active_tab).css("display","block");
$("#tab_"+global_active_tab).attr("class","tab_active");
}
/script
自己改下样式就行，图片列表1之类的改为下面表格，自己定义下样式，再把jquery写法改成js写法，这种问题连分都没啊
关于鼠标经过切换tab的js代码问题
EasyTabs 吧？ 除了easytabs.js，应该还有一个example_one_menu.html的示例文件，打开example_one_menu.html，修改里面的代码。
其中，应该有这么一段：
……
lia href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;" title="" id="tablink1"Tab 1/a/li
lia href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;" title="" id="tablink2"Tab 2 /a/li
lia href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;" title="" id="tablink3"Tab 3 /a/li
lia href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;" title="" id="tablink4"Tab 4 /a/li
……
将其修改成：
……
lia href="#" onclick="easytabs('1', '1');" title="" id="tablink1"Tab 1/a/li
lia href="#" onclick="easytabs('1', '2');" title="" id="tablink2"Tab 2 /a/li
lia href="#" onclick="easytabs('1', '3');" title="" id="tablink3"Tab 3 /a/li
lia href="#" onclick="easytabs('1', '4');" title="" id="tablink4"Tab 4 /a/li
……
就是你想要的效果了。
如何用js代码写一个tab选项卡
代码如下：
html
head
style type="text/css"
*
{
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
font-size: 12px;
padding-top: 0px;
}
BODY
{
padding-left: 20px;
padding-top: 20px;
}
.wid240
{
width: 242px;
margin-bottom: 20px;
}
.wid180
{
width: 182px;
}
.tab
{
border-bottom: #000 1px solid;
border-left: #000 1px solid;
border-top: #000 1px solid;
border-right: #000 1px solid;
}
.tab UL
{
zoom: 1;
clear: both;
}
.tab UL:after
{
display: block;
height: 0px;
visibility: hidden;
clear: both;
content: "";
}
.tab UL LI
{
text-align: center;
line-height: 26px;
width: 60px;
display: inline;
background: #000;
float: left;
height: 26px;
color: #fff;
}
.tab UL LI.on
{
background: #fff;
color: #000;
}
.tabList
{
border-bottom: #000 1px solid;
border-left: #000 1px solid;
height: 150px;
border-top: #000 1px;
border-right: #000 1px solid;
}
.tabList .one
{
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
display: none;
color: #ff0000;
padding-top: 10px;
}
.tabList .block
{
display: block;
}
/style
script type="text/javascript"
function setTab(name,m,n){
for( var i=1;i=n;i++){
var menu = document.getElementById(name+i);
var showDiv = document.getElementById("cont_"+name+"_"+i);
menu.className = i==m ?"on":"";
showDiv.style.display = i==m?"block":"none";
}
}
/script
meta name="GENERATOR" content="MSHTML 8.00.7600.16535"
/head
body
div class="wid240"
div class="tab"
ul
li id="one1" class="on" onmouseover='setTab("one",1,4)'one1 /li
li id="one2" onmouseover='setTab("one",2,4)'one2 /li
li id="one3" onmouseover='setTab("one",3,4)'one3 /li
li id="one4" onmouseover='setTab("one",4,4)'one4 /li
/ul
/div
div class="tabList"
div id="cont_one_1" class="one block"
cont_one_1/div
div id="cont_one_2" class="one"
cont_one_2/div
div id="cont_one_3" class="one"
cont_one_3/div
div id="cont_one_4" class="one"
cont_one_4/div
/div
/div
div class="wid180"
div class="tab"
ul
li id="tow1" class="on" onclick='setTab("tow",1,3)'tow1 /li
li id="tow2" onclick='setTab("tow",2,3)'tow2 /li
li id="tow3" onclick='setTab("tow",3,3)'tow3 /li
/ul
/div
div class="tabList"
div id="cont_tow_1" class="one block"
cont_tow_1/div
div id="cont_tow_2" class="one"
cont_tow_2/div
div id="cont_tow_3" class="one"
cont_tow_3/div
/div
/div
/body
/html
直接复制到本地html页面运行就可以，望采纳，谢谢！
我想给这段JS鼠标滑动 自动切换TAB的时候设置一个延迟时间，请问如何操作？时间大概是300毫秒，代码如下
在执行函数的时候加入一个setTimeOut()方法。
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。
1. SetTimeOut()
1.1 SetTimeOut()语法例子
1.2 用SetTimeOut()执行Function
1.3 SetTimeOut()语法例子
1.4 设定条件使SetTimeOut()停止
1.5 计分及秒的counter
2. ClearTimeout()
3. Set Flag
10.1 setTimeout( )
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。请先看以下一个简单, 这是没有实际用途的例子, 只是用来示范 setTimeout( ) 的语法。
1. setTimeout( ) 语法例子
练习-69 等候三秒才执行的 alert( )
在 第 3 章 说到 alert 对话盒, 一般是用按钮叫出来, 在这练习, 你会看到网页开启后 3 秒, 就会自动出现一个 alert 对话盒。
1. 请用浏览器开启示范磁碟中的timeout1.htm, 这档桉有以下内容:
html body bgcolor=lightcyan text=red
h1 font color=blue 示范网页 /font /h1 p /br
p 请等三秒!
script
setTimeout("alert('对不起, 要你久候')", 3000 )
/script
/body /html
2. 留意网页开启后三秒, 就会出现一个 alert 对话盒。
setTimeout( )是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的 method 或 function, 有以下语法:
今次例子是设定等 3 秒 (3000 milliseconds), 浏览器就会执行 alert( ) 这一个method。
2. 用 setTimeout( ) 来执行 function
setTimeout( ) 通常是与 function 一起使用, 以下是一个较上个练习复杂的例子。
练习-70 状态列中自动消失的文字
在练习-20, 你看过如何用按钮在状态列显示文字, 然后再用按钮消除文字, 在这练习, 你看到如何用按钮在状态列显示文字, 而这文字会在三秒后自动消失。
1. 请用浏览器开启示范磁碟中的timeout2.htm, 这档桉有以下内容:
html body bgcolor=lightcyan text=red
h1 font color=blue 示范网页 /font /h1 p /br
script
function clearWord( )
{ window.status="" }
/script
form
input type="button" value="在状态列显示文字"
onClick="window.status='Hello' ,setTimeout('clearWord()', 3000) "
/form
/body /html
2. 请在按钮上按一下,你应见到状态列出现 Hello 这字, 留意过了三秒, 这字就会消失。
1. 这处先设定一个名为 clearWord( ) 的 function, 作以下定义:
window.status=""
这是用来消除状态列的文字 (请看练习-20 的说明), 浏览器执行 clearWord( ) , 就会消除状态列的文字。
2. 今次按钮设定了启动以下两项工作, 用 ， 分隔, 浏览器会顺序执行这两项工作:
onClick="window.status='Hello' , setTimeout('clearWord( )', 3000) "
3. 今次的 setTimeout( ) 有以下设定:
这是设定等 3 秒 (3000 milliseconds) 浏览器就会执行 clearWord( ) 这一个function。
在第 2 章, 你看过如何使到父视窗开启时自动开启一个子视窗, 若观看者不关闭这子视窗, 这子视窗就会一路开启。看过以上的练习, 请你设计一个会开启子视窗的网页, 而这子视窗在开启后两秒, 就会自动关闭。
具体使用可以百度查询，很多资料的。
JS实现Tab切换，超简单只有几行代码
JS* {padding-bottom: 0px;list-style-type: none;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;}.tabs {border-bottom: black 0px solid;border-left: black 1px solid;margin: 0px auto;width: 852px;height: auto;ove