css 实现Tab切换

最新推荐文章于 2023-08-08 09:41:16 发布

小牛呗

最新推荐文章于 2023-08-08 09:41:16 发布

阅读量510

点赞数

分类专栏： css 文章标签： css

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

不废话直接上代码

<!DOCTYPE HTML><!--声明HTML文件-->
<html><!--根标签，网页的开始-->
    <head><!--给浏览器看的信息-->
        <title>please enter your title</title>
        <meta charset="utf-8"><!--编码格式为国际编码UTF-8-->
        <meta name="description" content=""><!--对网页的描述，给搜索引擎抓取-->
        <meta name="keywords" content=""><!--为搜索引擎提供关键字列表-->
        <style type='text/css'>
            *{ margin:0; padding:0;font-family:'Microsoft yahei';}
            .test_box {
                width: 50%;
                min-height: 250px;
                margin: 1em auto;
                position: relative;
            }
            .test_tab {
                width: 25%;
                margin-right: -1px;
                border: 1px solid #ccc;
                border-bottom: 0;
                float: left;
            }
            .test_label {
                display: block;
                padding-top: 5px;
                padding-bottom: 5px;
                background-color: #eee;
                text-align: center;
            }
            .test_radio,
            .test_tab_content {
                position: absolute;
                left: -999em;
            }
            .test_radio:checked ~ .test_tab_content {
                margin-top: -1px;
                padding: 1em 2em;
                border: 1px solid #ccc;
                left: 0;
                right: 0;
            }
            .test_radio:checked ~ .test_label {
                background-color: #fff;
                border-bottom: 1px solid #fff;
                position: relative;
                z-index: 1;
            }
        </style>
    </head>
    <body><!--可视化区域-->

        <div class="test_box">
            <div class="test_tab">
                <input type="radio" id="testTabRadio1" class="test_radio" name="tab" checked="checked" />
                <label class="test_label" for="testTabRadio1">选项卡1</label>
                <div class="test_tab_content">
                    <p>我是选项卡1对应的美女</p>
                    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
                </div>
            </div>
            <div class="test_tab"> 
                <input type="radio" id="testTabRadio2" class="test_radio" name="tab" />
                <label class="test_label" for="testTabRadio2">选项卡2</label>
                <div class="test_tab_content">
                    <p>我是选项卡2对应的美女</p>
                    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
                </div>
            </div>
            <div class="test_tab">
                <input type="radio" id="testTabRadio3" class="test_radio" name="tab" />
                <label class="test_label" for="testTabRadio3">选项卡3</label>
                <div class="test_tab_content">
                    <p>我是选项卡3对应的美女</p>
                    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />
                </div>
            </div>
        </div>
    </body>
</html><!--网页的结束-->

小牛呗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 实现Tab切换

不废话直接上代码 <!DOCTYPE HTML><html> <head> <title>please enter your title</title> <meta charset="utf-8"> <meta
复制链接

扫一扫

专栏目录