用js寫簡單選項卡

如圖，最簡單的純粹的選項卡

第一步，當然是先寫html**和css樣式

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="gb2312"
/>
<
title
>無標題文件
title
>
<
style
>
body,ul,li
ul,li
.wrap
.hide
#tab_t
#tab_t li
#tab_t .act
#tab_c
style
>
head
>
<
body
>
<
div 
class
="wrap"
>
<
ul id
="tab_t"
>
<
li class
="act"
>選擇1
li>
<
li>選擇2
li>
<
li>選擇3
li>
<
li>選擇4
li>
ul>
<
div 
id="tab_c"
>
<
div>內容1
div>
<
div 
class
="hide"
>內容2
div>
<
div 
class
="hide"
>內容3
div>
<
div 
class
="hide"
>內容4
div>
div>
div>
body
>
html
>

要點1：abc.document.getelementsbytagname("li")：取得abc下面的所有標籤為li的元素，返回的是乙個元素集合，有陣列的一些屬性。

要點2：迴圈，先迴圈給li加上onclick事件，再onlink事件點選的時候，再迴圈讓所有選項卡的act樣式去掉，所有的內容隱藏。然後讓所點選的選項及對應內容顯示。

要點3：tab_t_li[i].index

=i; 在迴圈時，給選項卡加乙個額外的屬性並賦值，以做選項卡和內容的對應。

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="gb2312"
/>
<
title
>無標題文件
title
>
<
style
>
body,ul,li
ul,li
.wrap
.hide
#tab_t
#tab_t li
#tab_t .act
#tab_c
style
>
<
script
>
window.onload 
=function
()tab_t_li[
this
.index].classname ='
act'
;tab_c_li[
this
.index].classname =''
;}}}
script
>
head
>
<
body
>
<
div 
class
="wrap"
>
<
ul id
="tab_t"
>
<
li class
="act"
>選擇1
li>
<
li>選擇2
li>
<
li>選擇3
li>
<
li>選擇4
li>
ul>
<
div 
id="tab_c"
>
<
div>內容1
div>
<
div 
class
="hide"
>內容2
div>
<
div 
class
="hide"
>內容3
div>
<
div 
class
="hide"
>內容4
div>
div>
div>
body
>
html
>

要點：tab_t_li[i][evt] 因為傳值的時候是字串，如果直接寫的話就是tab_t_li[i]."onclick"這樣話是執行不了的，tab_t_li["onclick"]這樣執行沒問題。

好了，現在乙個頁面上就可以有多個切換了，只需要呼叫函式的時候，寫上相應的id名和標籤名，事件名稱就可以了

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="gb2312"
/>
<
title
>無標題文件
title
>
<
style
>
body,ul,li
ul,li
.wrap
.hide
#tab_t
#tab_t li
#tab_t .act
#tab_c
style
>
<
script
>
window.onload 
=function
()tab_t_li[
this
.index].classname ='
act'
;tab_c_li[
this
.index].classname =''
;}}}
}script
>
head
>
<
body
>
<
div 
class
="wrap"
>
<
ul id
="tab_t"
>
<
li class
="act"
>選擇1
li>
<
li>選擇2
li>
<
li>選擇3
li>
<
li>選擇4
li>
ul>
<
div 
id="tab_c"
>
<
div>內容1
div>
<
div 
class
="hide"
>內容2
div>
<
div 
class
="hide"
>內容3
div>
<
div 
class
="hide"
>內容4
div>
div>
div>
body
>
html
>

用js寫簡單選項卡 加 自動切換效果

接上篇 用js寫簡單選項卡 這篇就實現可以自動切換的切換效果，用這種效果就可以做簡單的焦點圖了。說明 設定乙個標識數字置為0，寫乙個每過幾秒標識 1,執行切換效果的函式，然後執行。當標識超過當前選項卡長度讓標識置為0。在滑鼠移到選項卡的時候關閉定時器，滑鼠移走的時候開啟定時器。doctype htm...

原生JS寫選項卡

封裝兩個方法deleteclass addclass 給元素新增classname function addclass elem,value else 給元素刪除classname function deleteclass elem,value html id tabs id lists class...

js，選項卡效果

css樣式 parent parent span wrap span wrap span span wrap span.focus ul wrap ul wrap ul ul wrap ul first child ul wrap ul li ul wrap ul li ajs樣式 function...