简单实现选项卡例子

原创 2007年09月19日 10:32: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" />
<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";
  }
 }

 

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

纯JS实现的简单tab选项卡切换效果

本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的。 Tab效果 ul{ list-style: none; } *{...
  • Handsome_fan
  • Handsome_fan
  • 2017年04月22日 16:25
  • 1347

简单是选项卡切换效果~

效果图:代码:
  • kakaxiD
  • kakaxiD
  • 2016年05月09日 14:17
  • 1154

史上最简单的JQ选项卡

选项卡,自动选项卡,JQ选项卡,JQ自动选项卡,选项卡插件
  • xyphf
  • xyphf
  • 2016年07月11日 13:01
  • 2227

HTML+Css写一个简单的选项卡

选项卡制作 *{margin: 0;padding: 0;} ul,li{list-style: none;} .box{width: 400px;margin: 20px auto;} ...
  • Pigpigever
  • Pigpigever
  • 2016年10月29日 14:58
  • 1186

Spring中的简单实现AOP小例子

Spring中的简单实现AOP小例子
  • starjuly
  • starjuly
  • 2016年08月31日 23:37
  • 1704

(16)JS实现简单的选项卡

思路:
  • Xuan6251237011
  • Xuan6251237011
  • 2014年05月26日 20:57
  • 2224

javascript实现选项卡切换效果

javascript实现选项卡切换效果
  • u014610047
  • u014610047
  • 2016年02月19日 14:00
  • 1220

HTML中tab选项卡制作

这次要做的是tab选项卡,也叫滑动门。具体是什么呢?如图 当我鼠标滑过上边标题栏的某一li时,下边显示的内容进行相应的改变。这个在门户网站经常用到。具体怎么做呢?其实很简单啦,只需要当我...
  • u014209090
  • u014209090
  • 2015年03月06日 17:24
  • 2639

选项卡的实现的几种方法

今天总结一下页面中选项卡实现的几种方法。在实战中会经常的使用到。下面的方法都是纯HTML+CSS,并没有用到JS,JS日后补上。 一、使用:target属性实现选项卡        页面的结构:(...
  • u014395826
  • u014395826
  • 2017年02月03日 19:45
  • 720

Android使用TabLayout实现选项卡

使用TabLayout实现一个选项卡效果,之前一直自定义ViewGroup实现,今天之间用的Google框架,给我的感觉就是方便! 先上效果图: 内容区域使用的ViewPage...
  • y874961524
  • y874961524
  • 2016年05月08日 20:08
  • 2063
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简单实现选项卡例子
举报原因:
原因补充:

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