tab 切换实现方法
- ul li 实现方法(只适用于,一个页面只有一组ul>li)
<!--menu-->
<div class="nav">
<ul class="nav-box">
<li class="nav-active">Why SecurityONE</li>
<li class="nav-title">Feature</li>
</ul>
</div>
<!--content-->
<div class="content-tab-box">
<ul class="page-box">
<li style="display: block;" class="roleRight animated">内容</li>
<li style="display: none;" class="roleRight animated">内容</li>
</ul>
</div>
//一个页面只适用一个,不适合多次使用
function tab(list, box) {
list.bind("click", function() {
var index = $(this).index();
$(this).parent().children("div").attr("class", "pro-btn");
$(this).attr("class", "pro-btn-active");
box.hide();
box.eq(index).show();
});
}
- input radio(只适用于,一个页面只有一组div>(input+radio)*n)
demo: http://output.jsbin.com/cicadu/4
<div class="container">
<div class="tab-wrapper">
<!--tab section 1-->
<input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-1" checked>
<label for="tab-radio-1" class="tab-handler tab-handler-1">水浒传</label>
<div class="tab-content tab-content-1">《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说,以宋江领导的起义军为主要题材,通过一系列梁山英雄反抗压迫、英勇斗争的生动故事,暴露了北宋末年统治阶级的腐朽和残暴,揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。按120回本计,前70回讲述各个好汉上梁山,后50回主要为宋江全伙受招安为朝廷效力,以及被奸臣所害。</div>
<!--tab section 2-->
<input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-2">
<label for="tab-radio-2" class="tab-handler tab-handler-2">三国演义</label>
<div class="tab-content tab-content-2">《三国演义》是中国古典四大名著之一,全名为《三国志通俗演义》。作者是元末明初小说家罗贯中,是中国第一部长篇章回体历史演义小说。描写了从东汉末年到西晋初年之间近105年的历史风云。全书反映了三国时代的政治军事斗争,反映了三国时代各类社会矛盾的转化,并概括了这一时代的历史巨变,塑造了一批叱咤风云的三国英雄人物。</div>
</div>
一个单选按钮后面跟一个lable[tab头],再后面跟上一个div[tab内容块]
用.radio:checked + .tab-header 指定当前tab头的样式
用.radio:checked + .tab-header + .tab-content 指定当前tab内容块的样式
html,body{
height: 100%;
margin:;
padding:;
background-color: #58596b;
}
.container{
width: 800px;
height: 400px;
margin: 100px auto;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.tab-wrapper{
position: relative;
width: 800px;
height: 60px;
background-color: #33344a;
}
.tab-wrapper .tab-radio{
display: none;
}
.tab-handler{
position: relative;
z-index:;
display: block;
float: left;
height: 60px;
padding: 0 40px;
color: #717181;
font-size: 16px;
line-height: 60px;
transition: .3s;
transform: scale(.9);
}
.tab-radio:checked + .tab-handler{
color: #fff;
background-color: #e74c3c;
transform: scale(1);
}
.tab-radio:checked + .tab-handler + .tab-content{
visibility: visible;
opacity:;
transform: scale(1);
}
.tab-wrapper .tab-content{
visibility: hidden;
position: absolute;
top: 60px;
left:;
width: 740px;
padding: 30px;
color: #999;
font-size: 14px;
line-height: 1.618em;
background-color: #fff;
opacity:;
transition: transform .5s, opacity .7s;
transform: translateY(20px);
}
tab 切换实现方法的更多相关文章
- 【原】react做tab切换的几种方式
最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...
- 论tab切换的几种实现方法
tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> ...
- Vue如何tab切换高亮最简易方法
以往我们实现tab切换高亮通常是循环遍历先把所有的字体颜色改变为默认样式,再点亮当前点击的选项,而我们在vue框架中实现tab切换高亮显示并不需要如此,只需要将当前点击选项的index传入给一个变量, ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- jQuery的DOM操作实例(1)——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- 基于zepto的H5/移动端tab切换触摸拖动加载更多数据
以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...
- JavaScript的Tab切换
在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...
- tab切换效果
选项卡是一个神奇的网页效果,不论大小网站,比如B2B像阿里巴巴,慧聪网,还有B2C这个不用说了吧,爱逛网店的童鞋们都知道的,像京东商城,淘宝网,拍拍网,一号店,凡客诚品,等等各种网各种网店,选项卡不仅 ...
- react实现的tab切换组件
我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...
随机推荐
- JavaScript中的原型链原理
工作中经常解除到prototype的概念,一开始错误的认为prototype是对象的原型链,其实prototype只能算是JavaScript开放出来的原型链接口,真正的原型链概念应该是__proto ...
- RabbitMQ配置
RabbitMQ Configuration RabbitMQ提供多种配置方式:配置文件.环境变量.运行时参数等等. 默认配置文件的位置在/etc/rabbitmq/ Config File Loca ...
- app 压力测试
monkey工具详解 https://blog.csdn.net/jffhy2017/article/details/54572400 ----------------------- Android ...
- 【干货】利用MVC5+EF6搭建博客系统(三)添加Nlog日志、缓存机制(MemoryCache、RedisCache)、创建控制器父类BaseController
PS:如果图片模糊,鼠标右击复制图片网址,然后在浏览器中打开即可. 一.回顾系统进度以及本章概要 目前博客系统已经数据库创建.以及依赖注入Autofac集成,接下来就是日志和缓存集成,这里日志用的是N ...
- Mybatis源码解析-MapperRegistry代理注册mapper接口
知识储备 SqlsessionFactory-mybatis持久层操作数据的前提,具体的解析是通过SqlSessionFactoryBean生成的,可见>>>Spring mybat ...
- SpringBoot(11) SpringBoot自定义拦截器
自定义拦截器共两步:第一:注册.第二:定义拦截器. 一.注册 @Configuration 继承WebMvcConfigurationAdapter(SpringBoot2.X之前旧版本) 旧版本代码 ...
- Logback中如何自定义灵活的日志过滤规则
当我们需要对日志的打印要做一些范围的控制的时候,通常都是通过为各个Appender设置不同的Filter配置来实现.在Logback中自带了两个过滤器实现:ch.qos.logback.classic ...
- Vue父组件传递异步获取的数据给子组件
问题场景: 当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值? 在父组件中: 首先在data()中定义data_detail为空: data(){ data_detail: ...
- C#获取某一路径下的所有文件名信息(包括子文件夹)
前言:初步梳理记录,以后慢慢总结更多的方法... 方法一:使用微软提供的方法:Dicrectory类中的:public static string[] GetFiles(string path, st ...
- [android] 代码注册广播接收者&利用广播调用服务的方法
利用广播调用服务里面的方法,间接的方式调用服务内部的方法,与现实中差不多,请媒体曝光 主界面里面 在界面创建的时候开启一下服务普通的startService()方法 发送一条广播出去 获取Intent ...