DIV CSS 佈局教程網

設為首頁加入收藏

DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> 關於HTML >> 一種簡潔的選項卡效果代碼

一種簡潔的選項卡效果代碼

編輯：關於HTML

　　選項卡原身是Windows操作系統的一個創意，即通過交換選項，讓很多項目信息輪替顯示在大小和位置都固定的小塊區域裡。因此選項卡具有占用篇幅小，輻射內容大的特點。一個典型的例子是你打開IE浏覽器，依次點擊“工具”-“Internet選項”，這個表單就是一個選項卡典型布局。當然了，這裡所說的選項卡效果是要在Web頁面實現的，並非應用程序裡的菜單選項，在網頁中應用選項卡可以使網頁顯得更緊湊，結合AJAX技術可以使頁面在有限的空間內展現更多的內容。本文主要介紹一種簡潔的選項卡效果的實現，兼容性較好，方便大家直接使用。

<style type="text/css"> body { margin:0px; text-align:center; font-size:12px; } #divall { margin:auto; margin-top:35px; width:300px; height:200px; background-color:#7DA7D9; border:0px; } #title { width:300px; height:20px; font-size:14px; margin-top:4px; } #table1 table { width:300px; height:30px; font-size:12px; } #table2 table { width:300px; height:30px; font-size:12px; } #content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2 { margin:auto; height:110px; width:290px; background-color:#eee; position:relative; } #content1 div,#content2 div,#content3 div,#content4 div,#content5 div,#content6 div { position:absolute; bottom:3px; right:3px; cursor:pointer; } a { text-decoration:none; } .changebordercolor { border-top:1px solid #369; border-left:1px solid #369; } .backbordercolor { border:0px solid red; } </style> <script language="javascript"> function msg(){ document.getElementById("msg1").style.display="none" document.getElementById("msg2").style.display="none" } function msgnone(ms,cont){ document.getElementById(ms).style.display='block' document.getElementById(cont).style.display='none' } function aa1(){ document.getElementById("content1").style.display="block" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa2(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="block" document.getElementById("content3").style.display="none" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa3(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="block" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa4(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById("content4").style.display="block" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa5(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="block" document.getElementById("content6").style.display="none" } function aa6(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="block" } </script> <body onLoad="aa1();msg()"> <div id="divall"> <div id="title">分類類型</div> <div id="table1"> <table cellpadding=0 cellspacing=0 boder=0> <tr align=center> <td onMouseOver="this.bgColor='#33ccff';aa1();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.sj33.cn">設計之家</a></td> <td onMouseOver="this.bgColor='#33ccff';aa2();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.sj33.cn">設計之家</a></td> <td onMouseOver="this.bgColor='#33ccff';aa3();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.sj33.cn">設計之家</a></td> </tr></table></div> <div id="content1">第一個裡面的內容<div onClick="msgnone('msg1','content1')">關閉</div></div> <div id="content2">第二個裡面的內容<div onClick="msgnone('msg1','content2')">關閉</div></div> <div id="content3">第三個裡面的內容<div onClick="msgnone('msg1','content3')">關閉</div></div> <div id="msg1">沒有選擇類型</div> <div id="table2"> <table cellpadding=0 cellspacing=0 boder=0> <tr align=center> <td onMouseOver="this.bgColor='#33ccff';aa4();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.sj33.cn">設計之家</a></td> <td onMouseOver="this.bgColor='#33ccff';aa5();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.sj33.cn">設計之家</a></td> <td onMouseOver="this.bgColor='#33ccff';aa6();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.sj33.cn">設計之家</a></td> </tr></table></div> <div id="content4">第四個裡面的內容<div onClick="msgnone('msg3','content4')">關閉</div></div> <div id="content5">第五個裡面的內容<div onClick="msgnone('msg2','content5')">關閉</div></div> <div id="content6">第六個裡面的內容<div onClick="msgnone('msg2','content6')">關閉</div></div> <div id="msg2">沒有選擇類型</div> </div></body>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

上一頁:HTML語法效果
下一頁:iframe的高度隨內容變化而變化的代碼

網站設計的主要方面: Th
深度分析：HTML5能否成為Flash終結者: 蘋果
如何將一個html頁面中嵌入另一個html頁面: 1、Iframe：<iframe src=top1.html frameBorder=0 wi

相關文章

HTML入門知識 HTML5教程關於HTML HTML和Xhtml HTML5特效代碼 HTML5詳解

小編推薦

網頁設計師必修的8個PS技巧 DIV CSS網頁布局常用的方法和技巧 HTML5常用知識使用語義HTML 用iframe解決下拉框與層之間的沖突垂直三欄布局擁有相同高度的方法 ASP、CSS實現隨機背景 Html教程(五)-表格 Firefox與IE下UL預設標記的異同 2012年HTML5的14個大膽預言

熱門推薦

HTML語言剖析(五) 字體標記 CSS比表格更難嗎？ Html教程(五)-表格 HTTP協議/IIS 原理及ASP.NET運行機制淺析【圖解】 DIV CSS網頁布局常用的方法和技巧中文Web設計HTML的em標記使用 HTML基礎:HTML表格標記及屬性 HTML頁面輸出應該遵循的幾點原則如何讓HTML5調用手機攝像頭拍照——實踐就是一切

大家都在看

基於JavaScript 聲明全局變量的三種方式詳解 CSS技術在網頁設計中的運用通用javascript代碼判斷版本號是否在版本范圍之間 IE8采用多兼容模式正常顯示網頁 CSS id與CSS class JavaScript中捕獲/阻止捕獲、冒泡/阻止冒泡方法 Date對象-當前系統時間.實例 XML基本概念入門學習指南

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|

Copyright © DIV+CSS佈局教程網 All Rights Reserved