tab设置js代码,js切换tab

本文目录一览：

• 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