`

tab标签页简单用法

    博客分类:
  • UI
 
阅读更多
<html>

<head>
<style>
.tab{width:300px;height:40px;}
.off{width:50px;height:20px; border:1px #999 solid; float:left;}
</style>

<script language="javascript">
function showTab(i){
if(i=='0' || i == 0){
document.getElementById('test0').style.display='';
document.getElementById('test1').style.display='none';
document.getElementById('test2').style.display='none';
}else if(i=='1' || i == 1){
document.getElementById('test0').style.display='none';
document.getElementById('test1').style.display='';
document.getElementById('test2').style.display='none';
}else if(i=='2' || i == 2){
document.getElementById('test0').style.display='none';
document.getElementById('test1').style.display='none';
document.getElementById('test2').style.display='';
}
}
</script>
</head>


<body>

<div class="tab">
<div class="off" onclick="showTab('0')">测试0</div>
<div class="off" onclick="showTab('1')">测试1</div>
<div class="off" onclick="showTab('2')"> 测试2</div>
</div>
</body>

  <div id="test0"> this is the test  zero </div>
 
  <div id="test1" style="display:none;"> this is the test  one </div> 
 
  <div id="test2" style="display:none;"> this is the test  two </div>

</html>
分享到:
评论

相关推荐

    页面框架+tab标签页+换肤

    使用方法: 基本上主框架页面不需要作任何的变动了,直接就可以用,就不讲了。 在这里主要讲一下使用tabControl: tabControl新开一个页面实际上是通过JS在主显示区域建立一个iframe 把这个iframe的src 指向我们指定...

    MFC Tab标签页控件 CTabSheet

    MFC中的CTabCtrl控件用起来特别麻烦,封装一下,使制作多页面程序更加方便。 和网上其他CTabSheet不太一样,免调用show...使用方法更简单,一句话搞定。调用语句: m_tab.AddPage(TEXT("标签一"), &dlg1, IDD_DIALOG1);

    基于js的iframe 可关闭tab标签组件使用方法

    非常好用的一款js集成的iframe,tab标签的使用,如果对各位有用的话,请回来给个好评,谢谢!

    圆角tab标签插件

    遇到的项目很变态,设计成圆角流线行得tab标签,在而且数量还是不确定的~~被逼无奈啊~~只好写了一个~~该插件支持最多99tab标签(如果你是高手可以改的~源代码以提供),具体用法js开头已经注明,实际上用的时候脚本...

    如何在MATLAB中做出标签页的效果-tab.rar

    使用方法是这样:首先建立一个figure,并在其中加入一个Text控件,需要注意的是这个text控件所在的位置就是将来标签页所在的位置,然后将附件中的tabpanel2.6中的文件放到figure同目录下,然后在命令行输入 ...

    Win7/Vista/XP资源管理器多标签QTtab

    它会让你在Windows Explorer中使用Tab标签功能,让你工作时不再堆满文件夹窗口,而在使用过程中又保持原汁原味的资源管理器操作方法和习惯。 QT TabBar 还有一些很有趣的功能,右键浏览文件夹内容,并能预览图片。...

    Bootstrap标签页(Tab)插件使用方法

    您可以通过以下两种方式启用标签页: 1、通过 data 属性:您需要添加 data-toggle=”tab” 或 data-toggle=”pill” 到锚文本链接中添加 nav 和 nav-tabs 类到 ul 中,将会应用 Bootstrap 标签样式,添加 nav 和 ...

    Bootstrap 标签页(Tab)插件

    Bootstrap 标签页(Tab)插件 标签页(Tab)在 结果如下所示: 方法 .$().tab:该方法可以激活标签页元素和...下面的实例演示了标签页(Tab)插件方法 .tab 的用法。在本实例中,第二个标签页 iOS 是激活的: 实例

    Auto Tab Discard 标签页自动休眠-0.6.7.1.zip

    概述:Auto Tab Discard 标签页自动休眠,可以通过休眠非活动标签页,来提升浏览器运行速度并最大限度地减少内存使用。一些不希望休眠的网站的标签页,可以列入白名单以防止休眠。 描述: AutoTabDiscard一个轻量级...

    Tab控件的使用方法及禁用某一页的方法

    Tab控件的使用方法及禁用某一页的方法的源代码

    懒人原生js tab标签切换效果

    效果描述: 如果你的页面只有一个tab切换的地方需要调用js效果 ... 使用方法: 1、将head中的css样式复制到你的样式表中 2、将body中的代码部分拷贝到你需要的地方即可 (转载请注明出处)

    Vue2.0 给Tab标签页和页面切换过渡添加样式的方法

    使用vue-router构建单页应用时,如何给当前页面的标签页添加样式呢? 1.在app.vue文件中你的nav中添加路由地址 ...以上这篇Vue2.0 给Tab标签页和页面切换过渡添加样式的方法就是小编分享给大家的全部内容了,

    懒人原创tab标签、选项卡切换效果

    效果描述: 一个很简单实用的tab... 使用方法: 1、将index.html中的css样式引入到你的页面中 2、将代码部分拷贝过去,然后修改至你想要的样式即可 (js采用绝对路径,建议直接远程调用,不建议修改)

    extjs动态添加tabpanel标签页支持pannel嵌入

    extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以

    Android 基于TabLayout实现的TAB页效果 仿今日头条.rar

    Android 基于TabLayout实现的TAB页导航切换效果 仿今日头条底部的TAB选项卡效果,TabLayout与ViewPager结合使用可以达到点击tab更新ViewPager、滑动ViewPager更新Tab的效果。这种效果现在在PC端、移动设备端已经很...

    Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码第1/3页

    如何实现这种Tab标签页的路由效果 如何为路由切换添加转场动画。 该功能的开发主要使用到 AntDesignVue 组件库的Tab组件和 Animate.css 效果如下:   Tab标签页实现 首先是该组件的模板部分, ContextMenu 组件是...

    如何在MATLAB中做出标签页的效果-tabgui.m

    使用方法是这样:首先建立一个figure,并在其中加入一个Text控件,需要注意的是这个text控件所在的位置就是将来标签页所在的位置,然后将附件中的tabpanel2.6中的文件放到figure同目录下,然后在命令行输入 ...

    Dream After New Tab for Chrome (谷歌浏览器新标签插件/扩展)

    为chrome添加新标签页新样式, 并可以替代默认的chrome://newtab 离线插件使用方法: 1. 地址栏键入chrome://extensions/ 或者 自定义及控制按钮(右上角) -&gt; 更多工具 -&gt; 扩展程序 (有可能需要打开开发者模式). 2. ...

    Android Tab标签的使用基础

    Android程序中,Tab标签窗口是一种常用的UI界面元素。它的实现主要是利用了TabHost类。 TabHost说明 TabHost是一个标签窗口的容器。 一个TabHost对象包含两个子元素对象: 一个对象是tab标签集合(TabWidget),用户...

Global site tag (gtag.js) - Google Analytics