• 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 切换实现方法的更多相关文章

  1. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  2. 论tab切换的几种实现方法

    tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> ...

  3. Vue如何tab切换高亮最简易方法

    以往我们实现tab切换高亮通常是循环遍历先把所有的字体颜色改变为默认样式,再点亮当前点击的选项,而我们在vue框架中实现tab切换高亮显示并不需要如此,只需要将当前点击选项的index传入给一个变量, ...

  4. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. jQuery的DOM操作实例(1)——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  6. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  7. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  8. tab切换效果

    选项卡是一个神奇的网页效果,不论大小网站,比如B2B像阿里巴巴,慧聪网,还有B2C这个不用说了吧,爱逛网店的童鞋们都知道的,像京东商城,淘宝网,拍拍网,一号店,凡客诚品,等等各种网各种网店,选项卡不仅 ...

  9. react实现的tab切换组件

    我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...

随机推荐

  1. [P5162] WD与积木

    每种堆法(理解成名次序列,举例3,3,8,2和7,7,100,2都对应2,2,1,3这个名次序列)等概率出现:题目中"两种堆法不同当且仅当某个积木在两种堆法中处于不同的层中"可见这 ...

  2. HTTP/2协议–特性扫盲篇

    HTTP/2协议–特性扫盲篇 随着web技术的飞速发展,1999年制定的HTTP 1.1已经无法满足大家对性能的要求,Google推出协议SPDY,旨在解决HTTP 1.1中广为人知的性能问题.SPD ...

  3. vue 关于vue.set的学习笔记

    vue新手小白,在看vue文档的时候 发现vue关于 数组,对象值改变的与 ng有那么点不同. 官方表示 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个 ...

  4. DotNetCore深入了解之二HttpContext类

    当KestrelServer启动时,会绑定相应的IP地址,同时在绑定时将加入HttpConnectionMiddleware作为终端连接的中间件. public async Task StartAsy ...

  5. for循环输出菱形的形状【java】

    使用for循环语句输出以下“菱形”效果: * *** ***** ******* ********* ******* ***** *** * 代码 /* * *** ***** ******* *** ...

  6. linux服务器部署tomcat和Nginx

    项目需要,申请了三台测试机器,好在测试机里面光秃秃的什么都没有,我就可以好好的学习一把玩一把了!接下来以图文的形式讲一下我所碰到的坑以及小小的收获吧! 一.准备工作 首先你得有一台可以玩的linux服 ...

  7. web认证

    前言: HTTP是无状态协议,之前已认证成功的用户状态无法通过协议层面保存下来.即无法实现状态管理,我们使用Cookie来管理Session(会话),以弥补HTTP协议中不存在的状态管理功能. 步骤: ...

  8. JSON初步认识

    一.背景 曾经有一段时间,XML是互联网传输结构化数据的标准.但是XML过于繁琐.冗长.JSON2001年就开始应用了,2006年,DC才把Json提交给IETF. 与XML相比,Json是在Java ...

  9. SpringBoot(10) Servlet3.0的注解:自定义原生Servlet、自定义原生Listener

    一.自定义原生Servlet 1.启动类里面增加注解 @ServletComponentScan 2.Servlet上添加注解  @WebServlet(name = "userServle ...

  10. ZooKeeper系列(1):安装搭建ZooKeeper环境

    ZooKeeper系列文章:https://www.cnblogs.com/f-ck-need-u/p/7576137.html#zk ZooKeeper有三种安装模式:单机安装(standalone ...