css Tab选项卡2
注意上述 红色方框 这个是锚点的变相 以及overflow:hiden结合, 利用 锚点对应 id , 也可以实现。 兼容ie6+ 适合手机tab 简单 不需要脚本
其实还可以利用 css3:target 实现 ,这里就不多做介绍,原理差不多,都是锚点,兼容ie9+
//以下是源代码 拷贝观察即可
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css Tab 2</title>
</head>
<body>
<style>
#content{ width:400px; height:400px; position:relative; border:1px solid #666;}
#content ul{ margin:0; padding:0; position:absolute; list-style:none;}
#content ul li{ list-style:none;}
#content ul li a{ display:block; color:#CCC; padding:4px;} .tabContent{ height:400px; overflow:hidden;}
.tabContent div{width:400px; height:400px;}
#tab1{ background:RED;}
#tab2{ background:green;}
#tab3{ background:blue;}
</style> <div id="content">
<ul>
<li><a href="#tab1">1</a></li>
<li><a href="#tab2">2</a></li>
<li><a href="#tab3">3</a></li>
</ul>
<div class="tabContent">
<div id="tab1">111111</div>
<div id="tab2">22222</div>
<div id="tab3">33333333</div>
</div>
</div> </body>
</html>
本文地址:http://www.cnblogs.com/surfaces/
css Tab选项卡2的更多相关文章
- css Tab选项卡
css tab 选项卡据说有2中实现方式 1. target css3 2. 描点 2的 核心原理是利用描点显示问题(描点父级 overflow). <style> body,div,ul ...
- css Tab选项卡1
利用 锚点原理 以及overflow:hiden 结合,实现纯 css tab 方式 兼容ie6 + 适合单个tab 不需要js 注意点 红色方框的 a 对应a ...
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- js基础练习一之tab选项卡
最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...
- :target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...
- 各种效果的tab选项卡
;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...
- tab选项卡-jQuery
上次用原生的js写了个tab选项卡 这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...
- react tab选项卡切换
Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...
随机推荐
- Sort方法的扩展
OC中类方法中仅仅为我们提供了一些降序方法,如今我们自定义方法,实现升序. 1.要求:定义一个Person类,实例变量包含name,age,height,定义几个对象,把这些对象保存在数组中,自定义方 ...
- linux查看CPU和内存信息
一 先来看看ps命令: 1.查看当前某个时间点的进程:ps命令就是最基本同时也是非常强大的进程查看命令.使用该命令可以确定有哪些进程正在运行和运行的状态.进程是否结束.进程有没有僵死. 哪些进程占用了 ...
- mysql copy复制拷贝表数据及结构的几种方式(转)
mysql拷贝表操作我们会常常用到,下面就为您详细介绍几种mysql拷贝表的方式,希望对您学习mysql拷贝表方面能够有所帮助.假如我们有以下这样一个表:id username password--- ...
- USACO sprime
/* ID:kevin_s1 PROG:sprime LANG:C++ */ //N = 1仅仅可能为2,3,5,7.N > 1仅仅可能为1,3,7.9. N = i,到N = i + 1递推假 ...
- Red Gate系列之一 SQL Compare 10.4.8.87 Edition 数据库比较工具 完全破解+使用教程
原文:Red Gate系列之一 SQL Compare 10.4.8.87 Edition 数据库比较工具 完全破解+使用教程 Red Gate系列之一 SQL Compare 10.4.8.87 E ...
- java Socket使用详细解释
客户/server通信模式, client需要主动创造和server Socket(套接字), server端收到了client的连接请求, 也会创建与客户连接的 Socket. Socket可看做是 ...
- CSharp SQLServer 登陆
=======后台SQLServer存储过程================ --创建数据库create database Stu; --创建表use MyShool;if exists(select ...
- wpf 模拟3D效果(和手机浏览图片效果相似)(附源码)
原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依 ...
- leetcode dfs Validate Binary Search Tree
Validate Binary Search Tree Total Accepted: 23828 Total Submissions: 91943My Submissions Given a bin ...
- 使用邮件发送执行时间久的SQL语句
ALTER proc [dbo].[usp_EmailLongRunningSQL] as begin declare@LongRunningQueries AS TABLE ( lrqId int ...