用CSS+JavaScript打造网页中的选项卡-阿里云开发者社区

用CSS+JavaScript打造网页中的选项卡

2024-09-27 98

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 用CSS+JavaScript打造网页中的选项卡

<!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('" οnclick="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('" οnclick="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>

用CSS+JavaScript打造网页中的选项卡

热门文章

最新文章

相关课程

相关电子书

相关实验场景

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

用CSS+JavaScript打造网页中的选项卡

热门文章

最新文章

相关课程

相关电子书

相关实验场景