[Javascript]利用Javascript實作網頁頁籤(Tab)

2008-10-29

40534
0
JavaScript

今天看了Will保哥的一篇文章"分享 30 多種動態的頁籤(Tab)介面與 Accordion 相關程式 "
這個文章有很多網頁頁籤(Tab)的使用範例畫面...有興趣的人可以看看...

今天看了Will保哥的一篇文章"分享 30 多種動態的頁籤(Tab)介面與 Accordion 相關程式 "

這個文章有很多網頁頁籤(Tab)的使用範例畫面...有興趣的人可以看看...

頁籤(Tab)在很多地方都可以看到,像是pchome,yahoo的首頁都有...

最簡單的頁籤(Tab)其實就是由很多div組成的..然後先暫時顯示一個div

小弟就用範例介紹頁籤(Tab)最基本的的原理分享給大家呀..當然如果會css的人,搭配css會更美觀的喔...

JavascriptTab.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavascriptTab.aspx.cs" Inherits="JavascriptTab" %> <!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 runat="server"> <title>JavascriptTab</title> <style type="text/css"> .tab { border-right: black thin solid; border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid; width:200px; height:200px; } </style> </head> <body> <form id="form1" runat="server"> <div id="Group1"> <a href='#' onclick='ClickTab("0")'>tab1</a> <a href='#' onclick='ClickTab("1")'>tab2</a> <a href='#' onclick='ClickTab("2")'>tab3</a> (利用Click換頁)<div id='G1Div0' style="display: block" class="tab"> puma</div> <div id='G1Div1' style="display: none" class="tab"> F6 Team</div> <div id='G1Div2' style="display: none" class="tab"> Dotblogs</div> </div> <div id="Group2"> <a href='#' onmouseover='MouseOverTab("0")'>tab1</a> <a href='#' onmouseover='MouseOverTab("1")'>tab2</a> <a href='#' onmouseover='MouseOverTab("2")'>tab3</a> (利用MouseOver換頁)<div id='G2Div0' style="display: block" class="tab"> puma</div> <div id='G2Div1' style="display: none" class="tab"> F6 Team</div> <div id='G2Div2' style="display: none" class="tab"> Dotblogs</div> </div> </form> </body> </html> <script type="text/javascript"> //onclick做法 function ClickTab(Index) { var child = document.getElementById("Group1").getElementsByTagName("div"); for (var i=0;i<child.length;i++) { child[i].style.display="none"; } document.getElementById("G1Div"+Index).style.display="block"; } //mouseover做法 function MouseOverTab(Index) { var child = document.getElementById("Group2").getElementsByTagName("div"); for (var i=0;i<child.length;i++) { child[i].style.display="none"; } document.getElementById("G2Div"+Index).style.display="block"; } </script>

執行結果：

回首頁