CSS_CSS Tutorial_CSS_웹페이지 제작을 사용하여 탭 페이지 전환 효과를 구현하는 샘플 코드-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS_CSS Tutorial_CSS_웹페이지 제작을 사용하여 탭 페이지 전환 효과를 구현하는 샘플 코드

ringa_lee

Mar 20, 2018 pm 01:02 PM

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를 사용하는 것이 더 좋습니다. 다음은 다양한 선택 효과를 얻기 위한 다양한 스타일이 있는 작은 데모 코드입니다. 선택 및 전환 목적을 달성하기 위해 실제로 사용되는 핵심 코드는 단 몇 줄입니다.

데모 주소

코드:

<!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>

위 내용은 CSS_CSS Tutorial_CSS_웹페이지 제작을 사용하여 탭 페이지 전환 효과를 구현하는 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

利用CSS怎么创建渐变色边框？5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框？下面本篇文章给大家分享CSS实现渐变色边框的5种方法，希望对大家有所帮助！

css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。

css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。

css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。

See all articles

핫 AI 도구

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는