首頁 > 開發者 > CSS

用CSS+JavaScript打造網頁中的選項卡

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>用CSS+JavaScript打造網頁中的選項卡</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Purple Endurer">
<META NAME="Keywords" CONTENT="CSS,JavaScript,網頁製作,選項卡">
<META NAME="Description" CONTENT="用CSS+JavaScript打造網頁中的選項卡">
<style>
#tabmenu
{
 color: #000;
 border-bottom: 1px solid #FF7E00;
 margin: 5px 0px 0px 0px;
 padding: 0px;
 z-index: 1;
 padding-left: 10px;
}

#tabmenu li
{
 display: inline;
 overflow: hidden;
 list-style-type: none;
 margin: 5px;
}

#tabmenu a, a.active
{
 color: #000;
 background: #fff;
 border: 1px solid #FF7E00;
 padding: 2px 5px 0px 5px;
 margin: 0;
 text-decoration: none;
}

#tabmenu a.active
{
 background: #fff4d4;
 border-bottom: 3px solid #fff4d4;
}

#tabmenu a:hover
{
 background: #fff4d4;
}

#tabmenu a.active:hover
{
 background: #fff4d4;
 color: #000;
}

.activecontent
{
 text-align: justify;
 background: #fff4d4;
 padding: 2px;
 border: 1px solid #FF7E00;
 border-top: none;
 z-index: 2;
}

.activecontent a
{
 text-decoration: none;
 color: #00f;
}

.activecontent a:hover
{
    text-decoration: underline;
}

.activecontent ol
{
    margin: 5px 5px 5px 25px !important;
    margin: 5px 5px 5px 30px;
    padding: 0px;
}

.activecontent li
{
    margin: 0px;
    padding: 0px;
}

.hiddencontent
{
    display: none;
}
</style>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var TabArray = new Array();
TabArray[0] = new Array("endurer@blogchina", "http://endurer.blogchina.com");
TabArray[1] = new Array("endurer@blogcn", "http://endurer.blogcn.com"); 
TabArray[2] = new Array("endurer@xoyo", "http://blog.xoyo.com/endurer"); 
TabArray[3] = new Array("endurer@$inablog", "http://blog.sina.com.cn/u/1234333073"); 

g_tabCount = TabArray.length;

/*writeTab(),writeContents(), selTab()，各tab的內容分別獨立用一個<iframe>*/
function writeTab(tabIndex)
{
 if (0==g_tabCount)
 {
  document.write('空');
  return;
 }

 if (tabIndex >= g_tabCount)
 {
  tabIndex = g_tabCount-1;
 }

 document.write('<ul id="tabmenu">');
 
 for (i = 0; i < g_tabCount; i++)
 {
  document.write('<li><a id="tabTab');
  document.write(i);
  document.write('" onclick="selTab(');
  document.write(i);
  document.write(');return false;" class="');
  document.write(i == tabIndex ?"active" : "");
  document.write('" href="#">');
  document.write(TabArray[i][0]);
  document.write('</a></li>');
 }

 document.write("</ul>");
}

function writeContents(tabIndex, height)
{
 if (0==g_tabCount)
 {
  document.write('空');
  return;
 }

 if (tabIndex >= g_tabCount)
 {
  tabIndex = g_tabCount-1;
 }

 for (i = 0; i < g_tabCount; i++)
 {
  document.write('<div id="tabContent');
  document.write(i);
  document.write('" class="');
  document.write(i == tabIndex ?"active" : "hiddencontent");
  document.write('">');
  document.write('<iframe src="');
  document.write(TabArray[i][1]);
  document.write('" width="100%" height="');
  document.write(height);
  document.write('" style="border-left: 1 solid #FF7E00;border-right: 1 solid #FF7E00; border-bottom: 1 solid #FF7E00"></iframe>');
  document.write("</div>");
 }
}

function selTab(tabIndex)
{
 for (i = 0; i < g_tabCount; i++)
 {
  tab = document.getElementById("tabTab" + i);
  content = document.getElementById("tabContent" + i);
           
  if (i == tabIndex)
  {
   tab.className = "active";
   content.className = "activecontent";
  }
  else
  {
   tab.className = "";
   content.className = "hiddencontent";
  }
 }
}

/*writeTab1(),writeContents1(), selTab1()，各tab的內容共用一個<iframe>*/
function writeTab1(tabIndex)
{
 if (0==g_tabCount)
 {
  document.write('空');
  return;
 }

 if (tabIndex >= g_tabCount)
 {
  tabIndex = g_tabCount-1;
 }

 document.write('<ul id="tabmenu">');
 
 for (i = 0; i < g_tabCount; i++)
 {
  document.write('<li><a id="tabTab');
  document.write(i);
  document.write('" onclick="selTab1(');
  document.write(i);
  document.write(');return false;" class="');
  document.write(i == tabIndex ?"active" : "");
  document.write('" href="#">');
  document.write(TabArray[i][0]);
  document.write('</a></li>');
 }

 document.write("</ul>");
}

function writeContents1(tabIndex, height)
{
 if (0==g_tabCount)
 {
  document.write('空');
  return;
 }

 if (tabIndex >= g_tabCount)
 {
  tabIndex = g_tabCount-1;
 }

 var strHTML = '<iframe src="';
 strHTML += TabArray[tabIndex][1];
 strHTML += '" width="100%" height="';
 strHTML += height;
 strHTML += '" style="border-left: 1 solid #FF7E00;border-right: 1 solid #FF7E00; border-bottom: 1 solid #FF7E00"></iframe>';
 document.all("idTabContent").innerHTML = strHTML;
}

function selTab1(tabIndex)
{
 for (i = 0; i < g_tabCount; i++)
 {
  tab = document.getElementById("tabTab" + i);
  tab.className = (i == tabIndex ? "active": "");
 }
 writeContents1(tabIndex);
}
//writeTab(0);
//writeContents(0);
writeTab1(0);
//-->
</SCRIPT>

<div ID="idTabContent"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
writeContents1(0, 300);
//-->
</SCRIPT>
</div>
</BODY>
</HTML>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
free web hosting html css javascript html css and javascript all in one pdf output css css ellipsis css oblique css scheduler css selectors
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More