纯CSS实现选项卡的两种方式

1.配合overflow:hidden利用a标签超链接,锚点定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .tabDiv{
            width: 200px;
            height: 70px;
            background:#ccc;
            overflow: hidden;
        }
    </style>
</head>
<body>
<center>
    <ul class="head">
        <label for="ul1">
            <li>Tab1</li>
        </label>

        <a href="#ul2">
            <li>Tab2</li>
        </a>
        <a href="#ul3">
            <li>Tab3</li>
        </a>
        <a href="#ul4">
            <li>Tab4</li>
        </a>
    </ul>
    <div class="tabDiv">
        <ul id="ul1">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
        <ul id="ul2">
            <li>2</li>
            <li>2</li>
            <li>2</li>
            <li>2</li>
        </ul>
        <ul id="ul3">
            <li>3</li>
            <li>3</li>
            <li>3</li>
            <li>3</li>
        </ul>
        <ul id="ul4">
            <li>4</li>
            <li>4</li>
            <li>4</li>
            <li>4</li>
        </ul>
    </div>
</center>
</body>
</html>

2.通过覆盖,利用CSS3新增选择器修改z-index,配合单选框,label for实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .tabs{
            position: absolute;
        }
        .tab{
            float: left;
            margin-left: 10px;
        }
        .content {
            position: absolute;
            background: red;
            top: 30px;
            left: 20px;
            width: 300px;
            height: 260px;
            z-index: 1;
        }
        input{
            display: none;
        }
        .tab input:checked + .content {
            z-index: 2;
        }
    </style>
</head>
<body>
<div class="tabs">
    <div class="tab">
        <label for="check1">11111111111111</label>
        <input id="check1" type="radio" name="tabs" checked="checked" />
        <div class="content">
           选项卡1
        </div>
    </div>
    <div class="tab">
        <label for="check2">22222222222222</label>
        <input id="check2" type="radio" name="tabs" />
        <div class="content">
            选项卡2
        </div>
    </div>
    <div class="tab">
        <label for="check3">33333333333333</label>
        <input id="check3" type="radio" name="tabs" />
        <div class="content">
            选项卡3
        </div>
    </div>
</div>
</body>
</html>
Comments
Write a Comment