html两个tab页面,html如何实现tab页面切换

html实现tab页面切换的方法：首先创建一个类名为wrap的div当作容器；然后创建四个label标签，在每一个label中创建一个span标签；最后创建一个div作为这个导航项。

本教程操作环境：windows7系统、html5版，DELL G3电脑。

html实现tab页面切换的方法：

原理：通过label标签的关联属性和input的单选类型实现相应div的显示

1、创建一个类名为wrap的div当作容器

2、创建四个label标签，这将作为tab切换项

3、在每一个label中创建一个span标签(导航内容)，input标签(实现选中于取消选中)type类型为radio，还要创建一个div作为这个导航项被点中是显示内容框，

这里要注意的是input标签的name必须是相同的，我这边取名叫tab

最终HTML为下面这样：

home

home-page

list

list-page

news

news-page

mine

mine-page

重要的css，通过将input的width设为0使得input的那个小圆点不现实，又通过label的关联用导航项的点击实现input的checked，然后通过input:checked+div{display:block}实现相应div的显示

*{margin: 0;padding: 0;}

.wrap{

margin: 20px auto;

width: 403px;

height: 600px;

border:1px solid brown;

position: relative;

}

label{

width: 100px;

height: 30px;

float: left;

text-align: center;

line-height:30px;

border-right: 1px solid brown;

border-bottom: 1px solid brown;

}

label:nth-of-type(4){

border-right: none;

}

label span{

cursor: pointer;

}

label div{

width: 403px;

height: 568px;

position: absolute;

left: 0;

top: 31px;

background: #eeeeee;

display: none;

}

label input{

width: 0;

}

input:checked+div{

display: block;

}

html两个tab页面,html如何实现tab页面切换相关推荐

vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略) ...
uniapp滑动切换tab标签_Web前端，Tab切换，缓存，页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略)/ ...
java提交数据到另一个页面_JS实现把一个页面层数据传递到另一个页面的两种方式...
由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递 ...
[html] 制作一个页面时，需要兼容PC端和手机端，你是要分别做两个页面还是只做一个页面自适应？为什么？说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护个人简介 ...
同一页面实现多个Tab选项卡功能
同一页面实现多个TAB选项卡功能下载地址: http://down.51cto.com/data/988585 本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/x ...
从一个html页面传值到另一个页面,两个html之间的值传递(js location.search用法)
从一个html页面传值到另一个页面,两个html之间的值传递(js location.search用法) 转载,点击跳转
两个ListView实现的Android点餐页面
ListView实现的点餐页面(含热门推荐.购物车) 这是我的第一篇博文,主要是用来记录自己的学习过程,同时方便和大家互相学习.第一次写,写的不好,大家还请多包涵. 首先来看看这个页面的效果图: 该页 ...
vue 签署文件两张图合并成一张图 h5页面转换成图片并长按保存在本地
在做让用户在页面签名并把当前页面保存为图片,附上完整代码 (直接复制代码,更改接口地址或删除接口逻辑可直接复用) **准备工作:安装 npm install vue-esign --save 全局 ...
bootdo项目，js打开页面为新的tab页
bootdo 打开新页面为新的tab页 contabs.js 最后添加一下代码 * 新增一个选项卡* url :选项卡的内容(跳转的地址)* title:选项卡的标题* size: name的ifra ...
selenium中webdriver跳转新页面后定位置新页面的两种方式
刚刚在写Python爬虫的时候用到了selenium , 在跳转新页面时发现无法定位新页面 , 查找不到新页面的元素一番查询后得到了解决方法 , 便记录下来备忘 , 也与大家分享 # 页面跳转代码. ...

html两个tab页面,html如何实现tab页面切换

html两个tab页面,html如何实现tab页面切换相关推荐

最新文章

热门文章