.NET寺庙

<a href="http://www.wuxianyun.com">无线云 http://www.wuxianyun.com 专注于无线行业的技术,...

简单实现选项卡例子

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

 

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

阅读更多
个人分类: javascript
想对作者说点什么? 我来说一句

android选项卡demo

2014年05月23日 516KB 下载

android登陆界面

2015年05月11日 206KB 下载

Android快速实现选项卡

2017年06月05日 699KB 下载

选项卡tab小例子

qq_36263601 qq_36263601

2017-07-10 19:16:02

阅读数:178

没有更多推荐了,返回首页

不良信息举报

简单实现选项卡例子

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭