CSS를 사용하여 탐색 모음에서 탭 전환을 구현하는 세 가지 방법

이전 단어

<p> 내비게이션 바 탭은 페이지에서 매우 일반적입니다. 이 글에서는 CSS의 내비게이션 바 탭을 구현하는 세 가지 방법을 자세히 소개합니다

<p>

레이아웃

<p>

<p>  위 그림을 바탕으로 먼저 몇 가지 정의를 규정해 보겠습니다. 위 그림의 전체 모듈은 탐색 제목과 탐색 내용으로 구성됩니다. 위 그림과 같은 레이아웃 효과를 얻기 위해서는 시맨틱 레이아웃과 시각적 레이아웃의 두 가지 레이아웃 방법이 있습니다

<p>【의미 레이아웃】

<p>  시맨틱 레이아웃의 관점에서 각 네비게이션 제목과 해당 내비게이션 콘텐츠는 전체

<style>
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}   
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;}
.navI-tit{line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{position:relative;z-index:1;}
</style>

<p class="box">
    <ul class="nav">
        <li class="navI navI_active">
            <h2 class="navI-tit">课程</h2>
            <p class="navI-txt">课程内容</p>
        </li>
        <li class="navI">
            <h2 class="navI-tit">学习计划</h2>
            <p class="navI-txt ml1">学习计划内容</p>
        </li>
        <li class="navI">
            <h2 class="navI-tit">技能图谱</h2>
            <p class="navI-txt ml2">技能图谱内容</p>
        </li>
    </ul>   
</p>

<p>【시각적 레이아웃】

<p> 이어야 합니다. 시각적 레이아웃의 관점에서 모든 내비게이션 제목은 하나의 그룹이고 모든 내비게이션 콘텐츠는 하나의 그룹

<style>
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: inherit;}
.box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
.nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
.nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
.nav-txt{height: 200px;text-indent: 2em; line-height: 2;}
.nav-txtI{height: 200px;}
</style>

<p class="box">
    <nav class="nav-tit">
        <a class="nav-titI">课程</a>
        <a class="nav-titI">学习计划</a>
        <a class="nav-titI">技能图谱</a>
    </nav>
    <ul class="nav-txt">
        <li class="nav-txtI nav-txtI_active">课程内容</li>
        <li class="nav-txtI">学习计划内容</li>
        <li class="nav-txtI">技能图谱内容</li>
    </ul>
</p>

<p> 

hover

<p>  내비게이션 바의 기능은 내비게이션 제목을 클릭하면 해당 내비게이션 내용을 표시하는 것입니다. 유사한 효과를 얻기 위해 pseudo-hover 클래스를 사용하는 경우 첫 번째 레이아웃 방법인 시맨틱 레이아웃

<p>을 사용하는 것이 더 적합합니다. 시맨틱 레이아웃에서는 세 가지 탐색 내용이 겹쳐진 상태이기 때문입니다. 상위 요소 .navI로 이동하면 마우스 호버 상태가 발생하고 상위 요소의 스타일이 position:relative;z-index:1;으로 추가됩니다. 따라서 레벨이 높아집니다 z-index. 하위 요소의 탐색 콘텐츠의 계층적 경쟁에서 "자식이 아버지보다 더 가치가 있습니다." 상위 요소의 수준이 높으면 해당 탐색 콘텐츠가 겹쳐진 상태로 상단에 표시됩니다

<style>
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}   
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;}
.navI-tit{line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{position:relative;z-index:1;}
/*重点代码*/
.navI:hover{position:relative;z-index:1;}
.navI:hover .navI-tit{background:#fff;border-bottom:none;}
</style>

<p class="box">
    <ul class="nav">
        <li class="navI navI_active">
            <h2 class="navI-tit">课程</h2>
            <p class="navI-txt">课程内容</p>
        </li>
        <li class="navI">
            <h2 class="navI-tit">学习计划</h2>
            <p class="navI-txt ml1">学习计划内容</p>
        </li>
        <li class="navI">
            <h2 class="navI-tit">技能图谱</h2>
            <p class="navI-txt ml2">技能图谱内容</p>
        </li>
    </ul>   
</p>

<p>  [단점]: 초기 상태에서 첫 번째 탐색 제목은 기본 선택 상태(흰색 배경, 밑줄 없음)를 달성할 수 없으며 탐색 모듈 밖으로 마우스를 이동할 때 탐색 내용 부분을 수정할 수 없으며 첫 번째 탐색 콘텐츠가 표시됩니다. 탐색 모듈 밖으로 마우스를 이동하면 탐색 제목의 스타일을 수정할 수 없으며 기본 상태로 돌아갑니다.

<p>

앵커 포인트

<p>  키 내비게이션 바를 실현하는 방법은 내비게이션 제목과 내비게이션 콘텐츠 사이의 연결을 설정하는 방법이며 앵커 포인트는 유사한 효과를 얻을 수 있습니다. 앵커 포인트를 클릭하면 페이지가 해시 값을 생성한 후 해당 콘텐츠의 위치로 이동합니다

<p>  앵커 포인트 기술을 사용할 경우 의미 레이아웃과 시각적 레이아웃을 모두 사용하여 구현할 수 있습니다

<p>【1】 시맨틱 레이아웃 사용

<p>  시맨틱 레이아웃 사용 시 의사 클래스 target를 사용할 수 있으며 target 선택기를 사용하면 탐색 제목을 클릭할 때 현재 제목의 스타일을 변경할 수 있습니다. 그뿐만 아니라 형제 선택기를 사용하려면 HTML 구조를 변경하고 탐색 제목의 HTML 구조를 탐색 내용 아래로 이동해야 합니다

<p> 탐색 제목을 클릭하면 target 의사 클래스가 트리거되고 해당 탐색 콘텐츠 z-index의 수준이 변경되어 현재 탐색 콘텐츠가 세 가지 탐색 콘텐츠 중 우선권을 가지며 동시에 최상위 레이어에 표시되도록 합니다. 현재 탐색 제목

<style>
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}   
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;position:relative;}
.navI-tit{position:absolute;top:0;left:0;right:0;box-sizing: border-box;line-height: 40px;height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{width: 572px;height:200px;margin-top: 40px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{z-index:1;}
/*重点代码*/
.navI-txt:target{position:relative;z-index:1;}
.navI-txt:target ~ .navI-tit{background:#fff;border-bottom:none;}
</style>

<p class="box">
    <ul class="nav">
        <li class="navI navI_active">
            <p class="navI-txt" id="kc">课程内容</p>
            <a class="navI-tit" href="#kc">课程</a>
        </li>
        <li class="navI">
            <p class="navI-txt ml1" id="xx">学习计划内容</p>
            <a class="navI-tit" href="#xx">学习计划</a>
        </li>
        <li class="navI">
            <p class="navI-txt ml2" id="jn">技能图谱内容</p>
            <a class="navI-tit" href="#jn">技能图谱</a>
        </li>
    </ul>   
</p>

<p>  [단점]: 초기 상태가 기본적으로 선택됩니다. 탐색 제목 스타일을 설정할 수 없습니다. 앵커 기술 자체의 한계는 앵커 대상에 도달한다는 것입니다.

<p>【2】시각적 레이아웃 사용

<p>  시각적 레이아웃에서 세 개의 탐색 콘텐츠는 동일한 상위 요소에 속하며 상위 요소와 동일한 높이이며 블록 수준 요소의 배열에 따라 배열됩니다. 상위 요소가 오버플로 및 숨김으로 설정된 경우 기본적으로 첫 번째 탐색 콘텐츠만 표시됩니다.

<p>  탐색 제목을 클릭하면 해당 탐색 내용이 탐색 제목 줄 아래에 도달하여 탐색 전환 효과를 얻습니다

<p> 의사 클래스 hover를 사용하여 현재 탐색 제목 변경 스타일 효과

<style>
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: inherit;}
.box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
.nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
.nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
.nav-txt{height: 200px;text-indent: 2em; line-height: 2;}
.nav-txtI{height: 200px;}
/*重点内容*/
.nav-txt{overflow: hidden;}
.nav-titI:hover{background-color: white;border-bottom: none;}
</style>

<p class="box">
    <nav class="nav-tit">
        <a class="nav-titI" href="#kc">课程</a>
        <a class="nav-titI" href="#xx">学习计划</a>
        <a class="nav-titI" href="#jn">技能图谱</a>
    </nav>
    <ul class="nav-txt">
        <li class="nav-txtI nav-txtI_active" id="kc">课程内容</li>
        <li class="nav-txtI" id="xx">学习计划内容</li>
        <li class="nav-txtI" id="jn">技能图谱内容</li>
    </ul>
</p>

<p>  [단점]: 초기 상태에서 기본적으로 선택되는 탐색 제목 스타일은 설정할 수 없습니다. 앵커 포인트 기술 자체의 한계는 앵커 포인트 대상이 가시 영역 위로 최대한 높게 도달한다는 것입니다. 페이지 생성 점프; 호버 상태와 클릭 상태가 분리되어 있어 마우스가 탐색 모듈 밖으로 나갈 때 탐색 제목의 스타일이 고정되지 않고 기본 상태로 돌아갑니다.

<p>

레이블

<p> 위의 앵커 포인트 기술을 사용하여 내비게이션 제목과 내비게이션 내용을 연결하는데 label도 비슷한 효과를 얻을 수 있습니다. label 요소는 input 요소의 레이블을 정의하고 텍스트 레이블과 양식 컨트롤 간의 연결을 설정합니다. label 요소 내의 텍스트를 클릭하면 이 컨트롤이 트리거됩니다. 텍스트를 선택하면 브라우저는 자동으로 레이블

<p>과 관련된 양식 컨트롤로 초점을 전환합니다. label를 사용할 때는 의미 체계 레이아웃을 사용하세요. 및 시각적 레이아웃 모두 가능

<p>【1】시맨틱 레이아웃 사용

<p> 시맨틱 레이아웃 사용 시 label 태그를 사용하여 탐색 제목을 표시하고 라디오 버튼을 사용해야 합니다. <input type="radio">. 탐색 제목을 클릭할 때 현재 제목의 스타일을 변경하려면 의사 클래스 checked를 사용하고 checked 선택기를 사용하세요. 그뿐만 아니라 형제 선택기를 사용하려면 HTML 구조를 변경하고 각 .navI 요소의 상단에 라디오 버튼을 배치한 다음 display:none를 설정하고 <label>를 따라 탐색을 나타내야 합니다. 제목, 그리고 마지막으로 예 <p>는 탐색 콘텐츠를 나타냅니다

<p>  点击导航标题时，触发checked伪类，改变对应的导航内容的层级z-index，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式

<style>
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}  
input{margin: 0;width: 0;} 
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;}
.navI-tit{display:block;line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{position:relative;width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
/*重点代码*/
.navI-radio{display:none;}
.navI-radio:checked + .navI-tit{background:#fff;border-bottom:none;}
.navI-radio:checked ~ .navI-txt{z-index:1;}
</style>

<p class="box">
    <ul class="nav">
        <li class="navI">
            <input class="navI-radio" name="nav" type="radio" id="kc" checked>
            <label class="navI-tit" for="kc">课程</label>            
            <p class="navI-txt">课程内容</p>
        </li>
        <li class="navI">
            <input class="navI-radio" name="nav" type="radio" id="xx">
            <label class="navI-tit" for="xx">学习计划</label>            
            <p class="navI-txt ml1">学习计划内容</p>
        </li>
        <li class="navI">
            <input class="navI-radio" name="nav" type="radio" id="jn">
            <label class="navI-tit" for="jn">技能图谱</label>            
            <p class="navI-txt ml2">技能图谱内容</p>
        </li>
    </ul>   
</p>

<p>  [缺点]：HTML结构较复杂

<p>【2】使用视觉布局

<p>  在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容

<p>  点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果

<p>  使用伪类hover来实现改变当前导航标题样式的效果

<style>
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: inherit;}
input{margin: 0;padding: 0;border:none;}
.box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
.nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
.nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
.nav-txt{height: 200px;}
.nav-txtI{height: 200px;display:block;width: 100%;text-indent: 2em; line-height: 2;}
/*重点内容*/
.nav-txt{overflow: hidden;}
.nav-titI:hover{background-color: #fff;border-bottom:none;}
</style>

<p class="box">
    <nav class="nav-tit">
        <label class="nav-titI" for="kc">课程</label>
        <label class="nav-titI" for="xx">学习计划</label>
        <label class="nav-titI" for="jn">技能图谱</label>
    </nav>
    <nav class="nav-txt">
        <input class="nav-txtI nav-txtI_active" id="kc" value="课程内容" readonly>
        <input class="nav-txtI" id="xx" value="学习计划内容" readonly>
        <input class="nav-txtI" id="jn" value="技能图谱内容" readonly>
    </nav>
</p>

<p>  [缺点]：初始态默认选中的导航标题样式无法设置；有时会出现页面跳动的效果；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态

<p> 

最后

<p>  上面的三种方法中，实现效果最好的是使用label标签配合radio类型的input标签，通过:checked选择器来实现

<p>  在实际应用中，使用javascript的方式来控制导航条Tab的情况更为普遍

<p>更多CSS实现导航条Tab切换的三种方法 相关文章请关注PHP中文网！