탭 페이지 전환 효과를 달성하는 순수 CSS-H5 튜토리얼-php.cn

탭 페이지 전환 효과를 달성하는 순수 CSS

php中世界最好的语言

풀어 주다： 2018-03-20 13:23:02

원래의

4531명이 탐색했습니다.

이번에는 탭 페이지 전환 효과를 얻기 위한 순수 CSS를 소개하겠습니다. 순수 CSS를 사용하여 탭 페이지 전환 효과를 얻기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

최근에 페이지를 자를 때 탭 전환 부분이 포함되었습니다. js를 사용하고 싶지 않았기 때문에 전환 효과를 얻기 위해 순수 CSS 선택기를 사용할 수 있는지 생각했습니다. 검색해 보면 대략 3가지 작성 방법이 있습니다.

1. :hover 선택기를 사용하세요

단점: 마우스가 요소 위에 있을 때만 효과가 있으며, 기본적으로 특정 요소를 선택하여 표시하는 효과는 얻을 수 없습니다

2. a 태그 + :target selector

단점: 앵커 포인트는 선택한 요소를 페이지 상단으로 스크롤하기 때문에 위치가 바뀔 때마다 이동해야 하므로 경험이 매우 열악합니다.

3. 라벨과 라디오 사이의 바인딩 관계를 사용하고 라디오를 선택할 때 :checked 효과를 얻습니다.

단점: HTML 구조 요소가 더 복잡합니다

실험 후 세 번째 방법이 다음을 달성하는 것으로 나타났습니다. 최고의 효과. 그럼 세 번째 구현 방법에 대해 이야기해 보겠습니다.

이 방법의 작성 방법은 정해져 있지 않습니다. 정보를 확인해 보니 다양한 작성 방법이 혼란 스러웠습니다. 그것을 읽은 후 일반적인 아이디어는 동일하며 다음 단계에 지나지 않는다는 것을 알았습니다.

라벨 및 라디오 바인딩: 말할 것도 없이 ID 및 속성 바인딩
라디오 버튼 숨기기: 상상력을 사용하는 방법은 여러 가지가 있습니다. 제가 본 방법은 디스플레이를 설정하는 것입니다. 없음; , 절대 위치 지정을 설정하고, 왼쪽을 큰 음수 값으로 설정하고, 숨기기 효과를 얻기 위해 페이지 밖으로 이동하고, **절대 위치 지정: 요소를 문서 흐름에서 제외하고 불투명도를 0으로 설정합니다. ** 숨겨진 효과를 얻으려면 투명으로 설정하세요.
중복 탭 페이지 숨기기: 위와 같은 방법으로 z-index를 통해 계층 관계를 설정하여 서로 차단할 수도 있습니다.
기본 항목 설정: 기본 버튼에 selected="checked" 속성 추가
선택 효과 설정: + 선택기와 ~ 선택기를 사용하여 해당 요소가 표시될 때 아래 탭 페이지의 스타일을 설정합니다. 선택한 효과가 선택되었습니다.

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

로그인 후 복사

이렇게 하면 js를 사용하지 않고도 탭 페이지 전환 효과를 얻을 수 있습니다. 물론 호환성 문제가 있을 것입니다. 실제 작업에서는 탭 페이지에 js를 사용하는 것이 더 좋습니다. 다음은 주로 다양한 선택 효과를 달성하기 위한 다양한 스타일이 있는 코드입니다. 선택 전환 목적을 달성하기 위해 실제로 사용되는 핵심 코드는 단 몇 줄입니다.

Demo 주소

Code:

<!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;
            /* 为了修饰存在的层级使下边框遮挡下方p的上边框 */
            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>
            <p class="tab-box">
                111111111111
            </p>
        </li>
        <li class="tab-itom">
            <input type="radio" id="testTabRadio2" class="test-radio" name="tab">
            <label class="test-label" for="testTabRadio2">选项卡二</label>
            <p class="tab-box">
                2222222222222
            </p>
        </li>
        <li class="tab-itom">
            <input type="radio" id="testTabRadio3" class="test-radio" name="tab">
            <label class="test-label" for="testTabRadio3">选项卡三</label>
            <p class="tab-box">
                33333333333333
            </p>
        </li>
    </ul>
</body>
</html>

로그인 후 복사

이 기사의 사례를 읽으셨을 것입니다. 방법을 익힌 후 PHP 중국어 웹사이트의 다른 관련 기사를 주목하여 더 흥미로운 내용을 확인하세요!