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

來源:互聯網
上載者:User

<!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>

相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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