简单实现选项卡例子

转载 2007年09月24日 11:41:00

通常使用DIV+CSS+javascript实现选项卡,这里我用table+css+javascript ,原理一样

其实复杂的DIV+CSS+js的应用都差不多,只要把简单的原理弄清楚了,在难的应用也不过如此

说正题:

背景:利用 table+CSS+Javascript实现选项卡功能

原理:利用 js操作控制Table的隐藏和呈现,以及js控制相关样式,实现更好的用户体验

步骤:

1。test.html页面(本文重点在弄清原理,所以例子相当简单)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" rev="stylesheet" href="test.css" _fcksavedurl=""test.css"" />
<script src="test.js" type="text/javascript" language="javascript"></script>
</head>

<body>
<form action="" method="get">
<table width="200" border="1">
 <tr>
    <td id="td3" colspan="3" onclick="zhedie()">折叠</td>
  </tr>
  <tr>
    <td onclick="change(0)" id="td1" class="tyes">区域A</td>
    <td onclick="change(1)" id="td2">区域B</td>
  </tr>
  <tr>
   <td colspan="2">
  <table width="100%" border="1" id="table1">
    <tr>
   <td>aaaaa</td>
    </tr>
    <tr>
   <td>aaaa</td>
    </tr>
  </table>
  <table width="100%" border="1" id="table2" style="display:none">
    <tr>
   <td>bbbb</td>
    </tr>
    <tr>
   <td>bbbb</td>
    </tr>
  </table>
   </td>
  </tr>
</table>

</form>
</body>
</html>

2.javascript代码  test.js文件


 function change(n)
 {
  if(n==0)
  {
   table1.style.display="block";
   td1.className="tyes";
   table2.style.display="none";
   td2.className="tno";
  }
  else
  {
   table2.style.display="block";
   td2.className="tyes";
   table1.style.display="none";
   td1.className="tno";
  }
 }
 function zhedie()
 {
  if(td1.style.display=="none")
  {
   td1.style.display="block";
   td2.style.display="block";
   table1.style.display="block";
   table2.style.display="block";
  }
  else
  {
   td1.style.display="none";
   td2.style.display="none";
   table1.style.display="none";
   table2.style.display="none";
  }
 }

 

3。css样式文件  test.css


 function change(n)
 {
  if(n==0)
  {
   table1.style.display="block";
   td1.className="tyes";
   table2.style.display="none";
   td2.className="tno";
  }
  else
  {
   table2.style.display="block";
   td2.className="tyes";
   table1.style.display="none";
   td1.className="tno";
  }
 }
 function zhedie()
 {
  if(td1.style.display=="none")
  {
   td1.style.display="block";
   td2.style.display="block";
   table1.style.display="block";
   table2.style.display="block";
  }
  else
  {
   td1.style.display="none";
   td2.style.display="none";
   table1.style.display="none";
   table2.style.display="none";
  }
 }

 

好了,就这么简单,实现了选项卡的功能,在复杂的应用也不过如此

 

相关文章推荐

javascript实现-最简单选项卡切换

以下是用原生js实现的最简单选项卡切换效果。 鼠标滑过,对应的隐藏部分显示,并且样式发生改变。 代码最简洁,js行为优化版,复制粘贴即可使用。 ** javascript-实现最简易选项卡 ...

简单的android选项卡Tab菜单TabHost(一)同一Activity上实现

布局代码块activity_main.xml <TabHost xmlns:android="http://schemas.android.com/apk/res/android" andro...

JQuery实现的简单标签选项卡效果

jQuery实现的标签选项卡效果 ul,li { list-style:none; padding:0; marg...
  • deron7
  • deron7
  • 2011-12-10 20:28
  • 3147
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)