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 ...
随机推荐
- 促销R语言应用性能
1. 绩效评估 时间的确定 R测量时间是在最简单的方式提供是system.time性能. system.time(expr, gcFirst=TRUE) 这个函数会在不减少程序执行性能的情 ...
- javascript推断的浏览器类型
<script> window["MzBrowser"]={};(function() { if(MzBrowser.platform) return; var ua ...
- ACE 主动对象模式的按部就班的实现方法
ACE的主动对象模式的实现 对分布式系统设计来说,ACE提供的主动对象模式是让我们在系统框架构建的时候,回归到传统的单线程编程思维.你可能要问,既然有主动对象,那必然有被动对象,没有错,确实有被动对象 ...
- atitit.标准时间格式 相互转换 秒数 最佳实践
atitit.标准时间格式 相互转换 秒数 最佳实践 例如00:01:19 转换为秒数 79,,and互相转换 一个思路是使用div 60 mod...只是麻烦的... 更好的方法是使用stamp ...
- Hibernate Tomcat JNDI数据源配置(转)
简述: 配置JNDI 查找Tomcat 中server.xml中定义的数据源 步骤: 1. 修改elipse的数据源server.xml 主要修改如下, 1. 添加下面这段Context文本 其中St ...
- jQuery来源学习笔记:整体结构
1.1.由于调用一个匿名函数: (function( window, undefined ) { // jquery code })(window); 这是一个自调用匿名函数,第一个括号内是一个匿名函 ...
- selinux 工具下载地址
http://userspace.selinuxproject.org/releases/ 里面包含了 Name Last modified Size Description Parent Direc ...
- 键盘控制div上下左右移动 (转)
<html> <head> <title></title> <link rel="stylesheet" type=" ...
- nginx lua redis 访问频率限制(转)
1. 需求分析 Nginx来处理访问控制的方法有多种,实现的效果也有多种,访问IP段,访问内容限制,访问频率限制等. 用Nginx+Lua+Redis来做访问限制主要是考虑到高并发环境下快速访问控制的 ...
- maven学习系列(一)—maven安装和基本设置
maven下载和配置 第一步:下载apache-maven-2.3.2-bin.zip并解压到D:\tools,下载地址http://maven.apache.org/download.cgi 第二步 ...