zoukankan      html  css  js  c++  java
  • 纯CSS完成tab实现5种不同切换对应内容效果

     很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果

    实例预览

    下载地址

    实例代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <div class="main">
                    <ul class="tabs">
                        <li>
                            <input type="radio" checked name="tabs" id="tab1">
                            <label for="tab1">tab 1</label>
                            <div id="tab-content1" class="tab-content animated fadeIn">
                                <a href='#'>jQuery+jRange数值范围选择控件_鼠标拖动数值范围</a>
                                <p>本文用两个例子向大家介绍一款范围选择器插件jRange。</p>
                            </div>
                        </li>
                        <li>
                            <input type="radio" checked name="tabs" id="tab2">
                            <label for="tab2">tab 2</label>
                            <div id="tab-content2" class="tab-content animated fadeIn">
                                <a href='#'>jquery下利用jsonp跨域访问实现方法</a>
                                <p>本文将给您介绍如何使用getJSON来实现异步跨域提交表单。</p>
                            </div>
                        </li>
                        <li>
                            <input type="radio" checked name="tabs" id="tab3">
                            <label for="tab3">tab 3</label>
                            <div id="tab-content3" class="tab-content animated fadeIn">
                                <a href='#'>Flowplayer简单酷炫的视频播放器</a>
                                <p>Flowplayer是一款免费的WEB视频播放器。它支持播放flv、swf等流媒体和图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展。</p>
                            </div>
                        </li>
                    </ul>
                </div>
  • 相关阅读:
    vue Ant Design 树形控件拖动限制
    defineProperty介绍及使用
    webpack 配置入门
    vscode 插件
    解决输入框自动填充账号密码的问题
    css 动画
    vue按钮权限控制
    git操作
    TCP和UDP的区别
    通信协议 HTTP TCP UDP
  • 原文地址:https://www.cnblogs.com/LiuWeiLong/p/6079432.html
Copyright © 2011-2022 走看看