点击选项卡标题切换内容显示

3个月前 (06-03 18:46)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

这是一款简洁的选项卡特效，网页中常用到的选项卡网页特效，根据自己的需求您自定义各选项内容，鼠标点击方式切换显示。

<html>
<head>
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<style type="text/css">
<!--
.tablestyle1 {
  font: normal 12px "宋体", Arial;
  color: #777777;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid #E4E4E4;
  border-right: 1px solid #4E4E4E;
  border-bottom: 1px solid #4E4E4E;
  border-left: 1px solid #E4E4E4;
  background: #FDFDFD;
}
.Tdstyle1 {
  background: #FDFDFD;
  border-top: 1px solid #E6E6E6;
  border-right: 1px solid #E6E6E6;
  border-bottom: 1px solid #E6E6E6;
  border-left: 1px solid #E6E6E6;
  cursor: hand;
  text-decoration: none;
}
.Titledivstyle {
  text-align: justify;
  text-justify:Distribute-all-lines;
}
.inf1 {
  color: #EDB905;
}
.inf2 {
  color: #107460;
}
body {
  margin-left: 0px;
  margin-top: 0px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function iniINF(Init)//在网页初始化时，将各项详细信息隐藏的过程。
{
  if(Init)
  {
    inf1.style.display='none';
    inf2.style.display="none";
    inf3.style.display="none";
    inf4.style.display="none";
    inf5.style.display="none";
    inf6.style.display="none";
  }
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function showinf(theObj)//查找并显示对应详细信息的过程。
{
  switch(theObj)
  {
    case 'inf1'://当鼠标点击目标为“银行汇款”时的处理过程。
      with(findObj(theObj))
      if(style.display=='none')//检查当前鼠标点击的选项的详细信息是否已处于显示状态。若已显示，则关闭；若未显示，则弹出。
      {
        style.display='';
        inf2.style.display="none";
        inf3.style.display="none";
        inf4.style.display="none";
        inf5.style.display="none";
        inf6.style.display="none";
        Menu1.style.color='#FF0000';
        Menu1.style.background='#E1F8C2';
        Menu2.style.color='';
        Menu2.style.background='';
        Menu3.style.color='';
        Menu3.style.background='';
        Menu4.style.color='';
        Menu4.style.background='';
        Menu5.style.color='';
        Menu5.style.background='';
        Menu6.style.color='';
        Menu6.style.background='';
      }
      else
      {
        style.display='none';
                 Menu1.style.color='';
        Menu1.style.background='';
      }
      break;
    case 'inf2'://当鼠标点击目标为“邮局汇款”时的处理过程。
      with(findObj(theObj))
      if(style.display=='none')
      {
        style.display='';
        inf1.style.display="none";
        inf3.style.display="none";
        inf4.style.display="none";
        inf5.style.display="none";
        inf6.style.display="none";
        Menu2.style.color='#FF0000';
        Menu2.style.background='#E1F8C2';
        Menu1.style.color='';
        Menu1.style.background='';
        Menu3.style.color='';
        Menu3.style.background='';
        Menu4.style.color='';
        Menu4.style.background='';
        Menu5.style.color='';
        Menu5.style.background='';
        Menu6.style.color='';
        Menu6.style.background='';
      }
      else
      {
        style.display='none';
        Menu2.style.color='';
        Menu2.style.background='';
      }
      break;
    case 'inf3'://当鼠标点击目标为“网上支付”时的处理过程。
      with(findObj(theObj))
      if(style.display=='none')
      {
        style.display='';
        inf2.style.display="none";
        inf1.style.display="none";
        inf4.style.display="none";
        inf5.style.display="none";
        inf6.style.display="none";
        Menu3.style.color='#FF0000';
        Menu3.style.background='#E1F8C2';
        Menu2.style.color='';
        Menu2.style.background='';
        Menu1.style.color='';
        Menu1.style.background='';
        Menu4.style.color='';
        Menu4.style.background='';
        Menu5.style.color='';
        Menu5.style.background='';
        Menu6.style.color='';
        Menu6.style.background='';
      }
      else
      {
        style.display='none';
        Menu3.style.color='';
        Menu3.style.background='';
      }
      break;
    case 'inf4'://当鼠标点击目标为“电话充值”时的处理过程。
      with(findObj(theObj))
      if(style.display=='none')
      {
        style.display='';
        inf2.style.display="none";
        inf3.style.display="none";
        inf1.style.display="none";
        inf5.style.display="none";
        inf6.style.display="none";
        Menu4.style.color='#FF0000';
        Menu4.style.background='#E1F8C2';
        Menu2.style.color='';
        Menu2.style.background='';
        Menu3.style.color='';
        Menu3.style.background='';
        Menu1.style.color='';
        Menu1.style.background='';
        Menu5.style.color='';
        Menu5.style.background='';
        Menu6.style.color='';
        Menu6.style.background='';
      }
      else
      {
        style.display='none';
        Menu4.style.color='';
        Menu4.style.background='';
      }
      break;
    case 'inf5'://当鼠标点击目标为“手机充值”时的处理过程。
      with(findObj(theObj))
      if(style.display=='none')
      {
        style.display='';
        inf2.style.display="none";
        inf3.style.display="none";
        inf4.style.display="none";
        inf1.style.display="none";
        inf6.style.display="none";
        Menu5.style.color='#FF0000';
        Menu5.style.background='#E1F8C2';
        Menu2.style.color='';
        Menu2.style.background='';
        Menu3.style.color='';
        Menu3.style.background='';
        Menu4.style.color='';
        Menu4.style.background='';
        Menu1.style.color='';
        Menu1.style.background='';
        Menu6.style.color='';
        Menu6.style.background='';
      }
      else
      {
        style.display='none';
        Menu5.style.color='';
        Menu5.style.background='';
      }
      break;
    case 'inf6'://当鼠标点击目标为“U币卡充值”时的处理过程。
      with(findObj(theObj))
      if(style.display=='none')
      {
        style.display='';
        inf2.style.display="none";
        inf3.style.display="none";
        inf4.style.display="none";
        inf5.style.display="none";
        inf1.style.display="none";
        Menu6.style.color='#FF0000';
        Menu6.style.background='#E1F8C2';
        Menu2.style.color='';
        Menu2.style.background='';
        Menu3.style.color='';
        Menu3.style.background='';
        Menu4.style.color='';
        Menu4.style.background='';
        Menu5.style.color='';
        Menu5.style.background='';
        Menu1.style.color='';
        Menu1.style.background='';
      }
      else
      {
        style.display='none';
        Menu6.style.color='';
        Menu6.style.background='';
      }
      break;
  }
}
// Example: obj = findObj("image1");
function findObj(theObj, theDoc)//查找对象函数。
{//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var p, i, foundObj;
if(!theDoc) theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
{
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
return foundObj;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//-->
</script>
</head>
<body onLoad="iniINF(true);">
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<!--<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>s-->
<center><div align="center">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><table width="480" border="0" cellpadding="0" cellspacing="0" class="tablestyle1">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="Tdstyle1">
<tr>
<td id=Menu1 width="80" height="20" align="center" onMouseUp="showinf('inf1')">银行汇款</td>
<td id=Menu2 width="80" align="center" onMouseUp="showinf('inf2')">邮局汇款</td>
<td id=Menu3 width="80" align="center" onMouseUp="showinf('inf3')">网上支付</td>
<td id=Menu4 width="80" align="center" onMouseUp="showinf('inf4')">电话充值</td>
<td id=Menu5 width="80" align="center" onMouseUp="showinf('inf5')">手机充值</td>
<td id=Menu6 width="80" align="center" onMouseUp="showinf('inf6')">U币卡充值</td>
</tr>
</table></td>
</tr>
<tr>
<td height="200" valign="top" id="inf1"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="200" valign="middle"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="inf1">
<tr>
<td height="20"><div align="justify">汇款信息：</div></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="Titledivstyle">开户银行</td>
<td width="360"><div align="left">：深圳市商业银行XXX支行</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="Titledivstyle">帐户名</td>
<td><div align="left">：武鸣人</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="Titledivstyle">帐   号</td>
<td><div align="left">：https://www.wuming.ren</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td height="20"><div align="justify">建议大家在银行汇款时……</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="200" valign="top" id="inf2"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="200"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="inf2">
<tr>
<td height="20"><div align="justify">汇款信息：</div></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="Titledivstyle1">通 讯 地 址</td>
<td width="360"><div align="left">：深圳市……</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="Titledivstyle">收  款  人</td>
<td><div align="left">：深圳市XXXXXXXXX有限公司</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="Titledivstyle">邮    编 </td>
<td><div align="left">：xxxxxx</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td height="20"><div align="justify">建议大家在邮局汇款时……</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="200" valign="top" id="inf3"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="200" valign="middle">这是<font color="#FD5A02">“网上支付”</font>的信息。</td>
</tr>
</table></td>
</tr>
<tr>
<td height="200" valign="top" id="inf4"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="200" valign="middle">这是<font color="#3C8FEC">“电话充值”</font>的信息。</td>
</tr>
</table></td>
</tr>
<tr>
<td height="200" valign="top" id="inf5"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="200" valign="middle">这是<font color="#9E3CE8">“手机充值”</font>的信息。</td>
</tr>
</table></td>
</tr>
<tr>
<td height="200" valign="top" id="inf6"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="200" valign="middle">这是<font color="#62A70E">“U币卡充值”</font>的信息。</td>
</tr>
</table></td>
</tr>
</table>
  </td>
</tr>
</table>
</div></center>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/1119.html

选项卡切换
回帖

点击选项卡标题切换内容显示 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息