Tab控件效果

原创 2007年09月19日 11:12:00
<html>
<head>
<style>
td.act{border:2 solid black; border-bottom:0}
td.dis{border:0;border-bottom:2 solid black}
</style>
</head>
<body>
<table width=500 height=200 bgcolor=#eeeeee cellspacing=0 cellpadding=0>
<tr>
 <td height=20><table width=100% style="text-align:center"  cellspacing=0 cellpadding=0>
 <tr>
  <td id=tab1 value=1 onclick="toggle(this)" class="act">red</td>
  <td id=tab2 value=2 onclick="toggle(this)" class="dis">blue</td>
  <td id=tab3 value=3 onclick="toggle(this)" class="dis">green</td>
 </tr>
 </table>
 </td>
</tr>
<tr>
 <td style="background-color:#eeeeee">
 <div id=div1 style="position:relative;top:0;left:0;width:100%;height:100%;border:2 solid black; border-top:0;color:#f00;display:block">
  11111111 111111111 11111111111</div>
 <div id=div2 style="position:relative;top:0;left:0;width:100%;height:100%;border:2 solid black; border-top:0;color:#00f;display:none">
  222222 22222222 2222222222</div>
 <div id=div3 style="position:relative;top:0;left:0;width:100%;height:100%;border:2 solid black; border-top:0;color:#0f0;display:none">
 33333333 33333333 3333333</div>
 </td>
</tr>
</table>
<script language="JavaScript">
<!--
function toggle(x){
 for(var i=1; i<=3; i++){
  var e=eval("div"+ i);
  var y=eval("tab"+i);
  if(i==x.value){
   e.style.display="block";
   y.className="act";
  }else {
  e.style.display="none";
  y.className="dis";
  }
 }
}
//-->
</script>
</body>
</html> 

Android实现chrome浏览器的Tab样式

网上搜了好多种Tab切换的样式,就是没找到类似浏览器那种折叠的样式。于是,我就自己写了一个比较简单的实现!效果图如下:首先,让朋友帮忙做了两张图           开始写代码了!R.layout.a...
  • Ryfall
  • Ryfall
  • 2017年06月07日 14:33
  • 275

android实现tab切换效果

一:利用ViewPager实现Tab切换效果 1.首先新建几个要切换的xml布局文件,然后在主布局中间添加 布局,用于显示我们写好的xml布局。 2.在主方法中,定添加代码如下:LayoutInfla...
  • Reoger
  • Reoger
  • 2016年03月30日 20:41
  • 1093

Android自定义控件——TabButton

原创作品,转载请注明出处:http://blog.csdn.net/esun6/article/details/6893813 前段时间,看到携程网的Android客户端有个自定义的控件,效果很...
  • youngkingyj
  • youngkingyj
  • 2015年01月20日 19:15
  • 4057

MFC完全自绘Tab控件,支持图片背景

1.建立CWnd的派生类CNewTab: CArray m_arrImg; //保存Tab控件每一项的背景图片 CArray m_arrDlgID; //保存没一项对应的对话框ID CArray m_...
  • llive88
  • llive88
  • 2015年06月11日 16:21
  • 1075

纯css 实现tab效果

原理: 1、radio 与a 重叠, 2、radio zindex属性比a大, 3、radio透明 .nav { position: fixe...
  • proud2005
  • proud2005
  • 2015年09月24日 11:10
  • 1022

javaScript实例:tab切换效果

我们平时经常会用到tab切换的效果,如下图:这个效果很常见,用js就可以实现。布局分析:我们可以先让其中的一块内容显示,其他的内容先隐藏,当用户点击头部标签时,可以让当前内容隐藏,点击部分的内容显示出...
  • new_codeer
  • new_codeer
  • 2016年08月13日 17:30
  • 1671

MFC入门学习之控件(3)标签控件Tab Control的添加和使用

向对话框中拖入一个tab control控件,调整好大小以适合要求 对于控件类,我们需要定义一个控件类的对象,通过对象的成员方法来将需要添加的内容显示在对话框中,并通过一定的逻辑来控制标签项的显示...
  • codectq
  • codectq
  • 2014年02月12日 21:23
  • 6056

MFC中tab control控件的使用方法

一、新建一个MFC工程, 取名Tabctrl, 选择基于对话框, 然后点完成。   二、删除对话框上默认添加的三个控件,添加Tab Control控件,属性设置:ID:IDC_TAB1    ...
  • xinm1001
  • xinm1001
  • 2016年10月06日 20:33
  • 1023

MFC之Tab Control控件简单使用

在MFC当中使用Tab Control控件切换不同的界面,使用起来会复杂一些,至少是比Qt中的Tab Widget复杂得多。我接下来会以一个MFC对话框应用程序为例子,说明Tab Control控件的...
  • u010780613
  • u010780613
  • 2016年12月26日 10:15
  • 2537

例说WIN32 Tab控件使用

今天查找了一天关于SDK下,TAB控件的使用,到处都是C++的,本人还没开始学习C++,所以只能学习SDK方式使用TAB控件,搞了一天终于搞定了 ,现在在这里记录下,以便后来人有需要。 先直接上效果图...
  • liuyunjay66
  • liuyunjay66
  • 2013年07月14日 19:19
  • 2907
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Tab控件效果
举报原因:
原因补充:

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