css tab 选项卡据说有2中实现方式

1. target css3

2。 描点

2的 核心原理是利用描点显示问题(描点父级 overflow)。

 <style>
body,div,ul,li{margin:0; padding:0; font-size:12px;}
.tab_ul{ margin:10px auto 0;
padding-left:20px;
width:228px;
height:31px;
border:1px solid #DBA4E8;
border-bottom:0;}
.tab_ul li{ float:left; display:inline; margin:5px 0 0 5px; width:46px; height:26px;}
.tabDiv{ margin:0 auto; width:248px; height:200px;border:1px solid #DBA4E8; border-top:0; overflow:hidden;}
.tabDiv ul{ margin:0 auto 0; padding-top:10px; width:218px; height:190px;}
.tabDiv ul li{ height:24px; text-align:right; color:#666666; font-size:12px;} </style> <ul class="tab_ul">
<li><a href="#ul1">美食</a></li>
<li><a href="#ul2">娱乐</a></li>
<li><a href="#ul3">购物</a></li>
<li><a href="#ul4">住宿</a></li>
</ul>
<div class="tabDiv">
<ul id="ul1">
<li>11111111111111111</li>
</ul>
<ul id="ul2">
<li>2222222222222</li>
</ul>
<ul id="ul3">
<li>333333333333</li>
</ul>
<ul id="ul4">
<li>4444444444</li>
</ul>
</div>

  

css Tab选项卡的更多相关文章

  1. css Tab选项卡1

    利用   锚点原理 以及overflow:hiden 结合,实现纯  css  tab 方式 兼容ie6 + 适合单个tab   不需要js          注意点  红色方框的   a 对应a   ...

  2. css Tab选项卡2

    注意上述 红色方框   这个是锚点的变相  以及overflow:hiden结合, 利用  锚点对应 id  ,  也可以实现. 兼容ie6+  适合手机tab 简单   不需要脚本 其实还可以利用 ...

  3. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  4. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  5. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  6. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  7. 各种效果的tab选项卡

    ;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...

  8. tab选项卡-jQuery

    上次用原生的js写了个tab选项卡   这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...

  9. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

随机推荐

  1. C++多字节字符转换为宽字符的两种方法

    目前知道有两种方式:可以提供宽字符与ANSI字符之间的转换, 第一种由COM库提供的函数 char*  _com_util::ConvertBSTRToString(BSTR ); BSTR _com ...

  2. VirtualBox详细教程

    转自:http://bbs.kafan.cn/thread-358294-1-1.html 1.Sun xVM VirtualBox简介 VirtualBox官方网站:http://www.virtu ...

  3. Guava缓存器源码分析——缓存统计器

    Guava缓存器统计器实现: 全局统计器——         1.CacheBuilder的静态成员变量Supplier<StatsCounter> CACHE_STATS_COUNTER ...

  4. Linux学习笔记1:配置Linux网络和克隆虚拟机并更改配置

    一.配置Linux网络 在安装Linux的时候,一定要保证你的物理网络的IP是手动设置的,要不然会在Linux设置IP连通网络的时候会报network is unreachable 并且怎么也找不到问 ...

  5. NULL和nullptr的区别

    //error C2665: “go”: 2 个重载中没有一个可以转换所有参数类型 #include <iostream> void go(int num) { std::cout < ...

  6. ImageView 会盖掉ScrollView的OnTouchListener,监听Activity的手势

    当Activity的高度不够滑动的时候,ImageView会盖掉ScrollView的OnTouchListener监听. 这个时候须要设置Activity的(或者想直接监听Activity的手势也能 ...

  7. ASP.NET mvc4 WEB API异常处理

    当一个web api抛出一个异常后 此异常会被转化成一个HTTP响应 错误代码为500的服务错误 但是如果你不想让客户端看到500的错误码 你也可以自定义错误码 如下代码当用户输入的ID没有与之相关的 ...

  8. bootstarp(carousel)组件

    ##### 1.5.1.Bootstrap中轮播图插件叫作Carousel ##### 1.5.2.基本的轮播图实现 ```html <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须 ...

  9. JavaScript之JSON

    一.简介:Json是JavaScript中读取结构化数据更好的方式.因为Json数据可以直接传给eval(),而且不必创建DOM对象.Json是一种数据格式,不是一种编程语言,虽然具有相同的语法形式, ...

  10. CSS的“层叠”规则的总结

    当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下C ...