关闭

简单实现选项卡例子

712人阅读 评论(0) 收藏 举报

通常使用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" />
<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";
  }
 }

 

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:194087次
    • 积分:2860
    • 等级:
    • 排名:第12862名
    • 原创:92篇
    • 转载:26篇
    • 译文:0篇
    • 评论:69条
    最新评论