Используйте CSS для достижения эффекта переключения вкладок

Когда я недавно вырезал страницу, это включало часть переключения вкладок, потому что я не хотел использовать js и задавался вопросом, могу ли я использовать чистые селекторы CSS для достижения эффекта переключения. Есть примерно три способа написать это.

использовать:hoverСелектор
- Недостатки: Только при наведении мыши элемент имеет эффект, и не может добиться эффекта выбора и отображения определенного элемента по умолчанию.
использоватьa标签的锚点 + :target选择器
- Недостатки: поскольку точка привязки будет прокручивать выбранный элемент в верхнюю часть страницы, каждый раз, когда позиция переключается, опыт крайне плохой.
использоватьlabel和radioобязательные отношения иradio选中时的:checkedдля достижения эффекта
- Недостаток: структурные элементы HTML более сложны.

Опытным путем установлено, что третий способ дает наилучший эффект. Итак, давайте поговорим о третьем способе его достижения.

Способ написания этого метода не фиксирован.Когда я проверял информацию, были различные способы написания, что меня на некоторое время смутило. Прочитав его, я обнаружил, что общая идея та же, не более чем следующие шаги.

Метка привязки и радио: Излишне говорить, что идентификатор и для привязки атрибута
Скрыть переключатель: Есть много способов использовать ваше воображение.Методы, которые я видел, имеют настройкиdisplay:none;скрытый, установленныйАбсолютное позиционирование, установите слева большое отрицательное значение, переместитесь за пределы страницы, чтобы скрыть эффект, установите **абсолютное позиционирование: сделайте элемент вне потока документа, а затемopacity: 0;** Установите прозрачность для достижения скрытого эффекта.
Скрыть лишние вкладки: то же, что и выше, вы также можетеz-indexУстановите иерархию, чтобы блокировать друг друга.
Установить элемент по умолчанию: добавить кнопку по умолчаниюchecked="checked"Атрибуты

Установите выбранный эффект: используйте+селектор и~Селектор для установки стиля вкладки ниже, когда соответствующий элемент выбран для достижения выбранного эффекта

/* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
input[type="radio"]:checked+.test-label {
    /* 为了修饰存在的边框背景属性 */
    border-color: #cbcccc;
    border-bottom-color: #fff;
    background: #fff;
    /* 为了修饰存在的层级使下边框遮挡下方div的上边框 */
    z-index: 10;
}
/* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
input[type="radio"]:checked~.tab-box {
    /* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
    z-index: 5;
}

Таким образом, эффект переключения страниц вкладок может быть достигнут без небольшого количества js, и, конечно, должны быть проблемы с совместимостью. В реальной работе лучше использовать js для вкладок. Ниже приведен код небольшого демо.Существует много стилей, в основном для достижения различных эффектов выделения.Основной код, который действительно используется для достижения цели переключения выбора, состоит всего из нескольких строк.

демонстрационный адрес

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS实现Tab切换效果</title>
    <style>
        ul {
            margin: 0;
            padding: 0;

        }
        .clearfloat {
            zoom: 1;
        }
        .clearfloat::after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0;
        }

        .tab-list {
            position: relative;
        }

        .tab-list .tab-itom {
            float: left;
            list-style: none;
            margin-right: 4px;
        }

        .tab-itom .test-label {
            position: relative;
            display: block;
            width: 85px;
            height: 27px;
            border: 1px solid transparent;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            line-height: 27px;
            text-align: center;
            background: #e7e8eb;
        }

        .tab-itom .tab-box {
            /* 设置绝对定位方便定位相对于tab-list栏的位置，同时为了可以使用z-index属性 */
            position: absolute;
            left: 0;
            top: 28px;
            width: 488px;
            height: 248px;
            border: 1px solid #cbcccc;
            border-radius: 5px;
            border-top-left-radius: 0px;
            background: #fff;
            /* 设置层级最低方便选中状态遮挡 */
            z-index: 0;
        }
        /* 用绝对定位使按钮脱离文档流，透明度设置为0将其隐藏 */
        input[type="radio"] {
            position: absolute;
            opacity: 0;
        }
        /* 利用选择器实现  tab切换 */

        /* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
        input[type="radio"]:checked + .test-label {
            /* 为了修饰存在的边框背景属性 */
            border-color: #cbcccc;
            border-bottom-color: #fff;
            background: #fff;
            /* 为了修饰存在的层级使下边框遮挡下方div的上边框 */
            z-index: 10;
        }
        /* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
        input[type="radio"]:checked ~ .tab-box {
            /* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
            z-index: 5;
        }
    </style>
</head>

<body class="clearfloat">
    <ul class="tab-list clearfloat">
        <li class="tab-itom">
            <input type="radio" id="testTabRadio1" class="test-radio" name="tab" checked="checked">
            <label class="test-label" for="testTabRadio1">选项卡一</label>
            <div class="tab-box">
                111111111111
            </div>
        </li>
        <li class="tab-itom">
            <input type="radio" id="testTabRadio2" class="test-radio" name="tab">
            <label class="test-label" for="testTabRadio2">选项卡二</label>
            <div class="tab-box">
                2222222222222
            </div>
        </li>
        <li class="tab-itom">
            <input type="radio" id="testTabRadio3" class="test-radio" name="tab">
            <label class="test-label" for="testTabRadio3">选项卡三</label>
            <div class="tab-box">
                33333333333333
            </div>
        </li>
    </ul>
</body>

</html>