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