zoukankan      html  css  js  c++  java
  • 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{ 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{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/
  • 相关阅读:
    跳出IFrame几种方式
    EChart使用简单介绍
    ckplayer视频播放插件使用
    uploadify文件批量上传
    纵表与横表互转实例(转)
    Sublime Text3使用记录
    异步上传,显示进度条
    JS手机浏览器判断(转)
    命令行创建maven模块工程
    eclipse创建maven模块工程
  • 原文地址:https://www.cnblogs.com/surfaces/p/4274307.html
Copyright © 2011-2022 走看看