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这种优雅的 ...
随机推荐
- zookeeper服务发现实战及原理--spring-cloud-zookeeper源码分析
1.为什么要服务发现? 服务实例的网络位置都是动态分配的.由于扩展.失败和升级,服务实例会经常动态改变,因此,客户端代码需要使用更加复杂的服务发现机制. 2.常见的服务发现开源组件 etcd—用于共享 ...
- Python机器学习笔记:XgBoost算法
前言 1,Xgboost简介 Xgboost是Boosting算法的其中一种,Boosting算法的思想是将许多弱分类器集成在一起,形成一个强分类器.因为Xgboost是一种提升树模型,所以它是将许多 ...
- git在工作中的用法总结-使用篇
上一篇介绍了git的环境安装配置,本篇对git在工作中常用的用法进行总结,已满足大部分的日常工作需求,对于其他的一些git命令用法在今后使用到时我也会更新上来,文中如有错误,欢迎大家指出来,谢谢~ 一 ...
- (1)编译安装lamp三部曲之apache-技术流ken
简介 采用yum安装lamp简单,快捷,在工作中也得到了普遍应用.但是如果我们需要某些特定模块功能,以及制定安装位置等,就需要用到编译安装了,接下来将编译安装lamp之apache. 系统环境及服务版 ...
- Hangfire定时任务设置CronExpression表达式
Cron format helper This utility helps you build Cron expressions easily by choosing job scheduling s ...
- oracle expdp自动备份脚本
windows: @echo off echo ================================================ echo Windows环境下Oracle数据库的自动 ...
- [日常] DNS解析概述
DNS DomainNameSystem域名系统,根据域名查出IP地址 1.dig命令可以显示整个查询的过程 root@VM-38-204-ubuntu:~# dig www.sopans.com / ...
- SpringMVC表单验证与Velocity整合
阅读本文约“1.2分钟” 定义表单类 以Login为例,有username和password两个字段 import javax.validation.constraints.NotNull; impo ...
- Hibernate(十三)迫切内连接fetch
迫切内连接fetch 内连接和迫切内连接的区别: 其主要区别就在于封装数据,因为他们查询的结果集都是一样的,生成底层的SQL语句也是一样的. 1.内连接:发送就是内连接的语句,封装的时候将属于各自对象 ...
- 设计模式之原型模式——Java语言描述
原型模式是用于创建重复对象,同时又能保证性能.这种类型的设计模式属于创建型模式,它提供了一种创建对象的方式 这种模式实现了一个原型接口,该接口用于创建当前对象的克隆.当直接创建对象的代价比较大时,则适 ...