HTML頁面代碼如下:
創新互聯建站專業提供成都主機托管四川主機托管成都服務器托管四川服務器托管,支持按月付款!我們的承諾:貴族品質、平民價格,機房位于中國電信/網通/移動機房,綿陽電信機房機柜租用服務有保障!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Tab頁切換</title><scriptsrc="javascript/JScript.js" type="text/javascript"></script><linkhref="css/css.css" rel="stylesheet" type="text/css" /></head><body><tableclass="tabTitlesContainer"><trid="tabTitles"><tdclass="tabTitleSelected" onclick="tabPageControl(0)">DIV</td><tdclass="tabTitleUnSelected" onclick="tabPageControl(1)">CSS</td><tdclass="tabTitleUnSelected" onclick="tabPageControl(2)">JavaScript</td></tr></table><tableid="tabPagesContainer"><tbodyclass="tabPageSelected"><trclass="tabPage"><td>HTML的DIV控件是其他控件的容器。當要以編程方式生成控件、隱藏/顯示一組控件或本地化一組控件時,該控件尤其有用。</td></tr></tbody><tbodyclass="tabPageUnSelected"><trclass="tabPage"><td>級聯樣式表 (CSS) 包含應用于網頁中的元素的樣式規則。這些樣式定義元素的顯示方式以及元素在頁面中的放置位置</a></td></tr></tbody><tbodyclass="tabPageUnSelected"><trclass="tabPage"><td>Javascript是一種由Netscape的LiveScript發展而來的原型化繼承的面向對象的動態類型的區分大小寫的客戶端腳本語言,主要目的是為了解決服務器端語言,比如Perl,遺留的速度問題,為客戶提供更流暢的瀏覽效果。</td></tr></tbody></table></body></html>
簡單的JavaScript代碼如下:
function tabPageControl(n)
{
for (var i = 0; i < tabTitles.cells.length; i++)
{
tabTitles.cells[i].className= "tabTitleUnSelected";
}
tabTitles.cells[n].className= "tabTitleSelected";
for (var i = 0; i < tabPagesContainer.tBodies.length; i++)
{
tabPagesContainer.tBodies[i].className= "tabPageUnSelected";
}
tabPagesContainer.tBodies[n].className= "tabPageSelected";
}
簡單的CSS代碼如下:
body{text-align:center;}
.tabTitlesContainer{text-align:center;font-size:small;cursor:hand;width:300px;border-width:thin;}
.tabTitleUnSelected{background-color:Silver;width:100px;}
.tabTitleUnSelected:hover{background-color:Orange;}
.tabTitleSelected{background-color:Gray;width:100px;}
#tabPagesContainer{text-align:left;font-size:small;font-size:small;width:300px;}
.tabPageUnSelected{background-color:Orange;display: none;}
.tabPageSelected{background-color: Orange;display:block;}
.tabPage{height:80px;}
網站標題:在HTML頁面中實現一個簡單的Tab-創新互聯
URL鏈接:http://vcdvsql.cn/article12/ggcdc.html
成都網站建設公司_創新互聯,為您提供定制網站、Google、小程序開發、App開發、ChatGPT、動態網站
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯