css如何实现Tab切换

程序员文章站 2022-03-13 20:30:01

...

方法一、利用a标签的锚点实现tab切换

（推荐教程：CSS教程）

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>cssTab切换2</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        .tab{
            width: 300px;
            height: 300px;
            margin: 30px auto;
            overflow: hidden;
        }
        .nav{
            height: 30px
        }
        .content{
            height: 270px;
            overflow: hidden;
        }
        .cont{
            height: 270px;
        }
        #the1{
            background: green;
        }
        #the2{
            background: blue;
        }
    </style>
</head>
<body>
<div class="tab">
    <div class="nav">
        <a href="#the1">ONE</a>
        <a href="#the2">TWO</a>
    </div>
    <div class="content">
        <div id="the1" class="cont">第一张</div>
        <div id="the2" class="cont">第二张</div>
    </div>
</div>
</body>
</html>

（学习视频推荐：css视频教程）

方法二、利用radio按钮和:checked选择器

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>纯css实现tab切换</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .tab{
            width: 300px;
            height: 150px;
            margin-left: 30px;
            margin-top: 30px;
            border: 1px solid #eee;
            position: relative;
            overflow: hidden;
        }
        input[type='radio']{
            display: none;
        }
        .tab label{
            display: block;
            cursor: pointer;
            position: absolute;
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #eee;
        }
        .label-1{
            left: 0;
            top: 0;
        }
        .label-2{
            left: 60px;
            top: 0;
        }
        input[type='radio']:checked~div[class^='mod']{
            display: block;
        }
        input[type='radio']:checked~label{
            background: orange;
        }
        [class^='mod']{
            position: absolute;
            top: 40px;
            left: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div>
            <input type="radio" id="r-1" name="tab" checked>
            <label for="r-1" class="label-1">第一张</label>
            <div class="mod-1">
                <ul>
                    <li>275万购昌平邻铁三居</li>
                    <li>总价20万买一居</li>
                    <li>200万内购五环三居</li>
                    <li>北京首现零首付楼盘</li>
                </ul>
            </div>
        </div>
        <div>
            <input type="radio" id="r-2" name="tab">
            <label for="r-2" class="label-2">第二张</label>
            <div class="mod-2">
                <ul>
                    <li>新中式的酷色温情</li>
                    <li>深圳房价大跌,每平8W</li>
                    <li>800万买沙井三房</li>
                    <li>宝安房价平均900W</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

以上就是css如何实现Tab切换的详细内容，更多请关注其它相关文章！

css如何实现Tab切换

表单取消功能该如何实现？_html/css_WEB-ITnose

在HTML中如何实现链接选择？详见内容_html/css_WEB-ITnose

求解答web中用easyui如何实现柱形图_html/css_WEB-ITnose

如何利用CSS实现图片的透明效果_html/css_WEB-ITnose

如何去掉element-ui中，tabs中el-tab-pane切换时的下划线

css如何在菜单上实现对勾？（代码）

请问如何实现table的外框和内框线的粗度不同？？_html/css_WEB-ITnose

CSS3如何实现2D转换和3D转换，他们有何区别_html/css_WEB-ITnose

在没有服务器的网页之间如何实现数据的共享_html/css_WEB-ITnose

css如何实现自动编号？计数器的使用