纯CSS实现多页签跳转_css实现标签页-CSDN博客

本文链接：https://blog.csdn.net/qq_38453189/article/details/75681029

首先把效果图给出来

这里写图片描述

会有人说，这不就是一个选项卡嘛，有什么难的，只要js入了门谁都会啊。是的，用js实现的话确实简单，几行代码足以实现了，但是我今天要说的并不是用js来实现它，而是要用完完全全的CSS（3）来实现，没错就是用纯CSS实现。

首先来说一下实现的原理

纯css实现多页签跳转效果的核心就是通过label绑定单选按钮radio实现不同页签的选中与否的状态，在这里第一个想到的问题应该是为什么效果图中没有看到有单选按钮是吧，因为单选按钮被隐藏了。在点击每个label的时候，被label绑定的radio就会被选中，由于所有radio的name属性相同，所以在同一时间只会有一个radio 被选中。然后通过页签的选中控制相关内容的显示与隐藏，这样就轻松的实现了页签之间的跳转。相信说到这里很多人已经明白了，不明白也没关系，接着看下面。

页面布局

<body>
    <div id="main">
        <input checked="checked" id="radio" class="radio" type="radio" name="radio">
        <input id="radio1" class="radio" type="radio" name="radio">
        <input id="radio2" class="radio" type="radio" name="radio">
        <label for="radio">页签1</label>
        <label for="radio1">页签2</label>
        <label for="radio2">页签3</label>
        <div class="tab">页签内容1</div>
        <div class="tab">页签内容2</div>
        <div class="tab">页签内容3</div>
    </div>
</body>

css代码

    <style type="text/css">
        #main{
            width: 510px;
            margin: 100px auto 0;
            border: 1px solid #999;
            background-color: lightgreen;
        }
        label{
            display: inline-block;
            cursor: pointer;
            height: 52px;
            line-height: 52px;
            font-size: 16px;
            width: 72px;
            text-align: center;
            margin: 0 47px;

        }
        .radio{
            margin: 0;
            display: none;
        }
        .radio:nth-of-type(1):checked~label:nth-of-type(1){
            color: #fff;
            border-bottom: 2px solid #fff;
            font-weight: bold;
        }
        .radio:nth-of-type(1):checked~.tab:nth-of-type(1){
            display: block;
        }
        .radio:nth-of-type(2):checked~label:nth-of-type(2){
            color: #fff;
            border-bottom: 2px solid #fff;
            font-weight: bold;
        }
        .radio:nth-of-type(2):checked~.tab:nth-of-type(2){
            display: block;
        }
        .radio:nth-of-type(3):checked~label:nth-of-type(3){
            color: #fff;
            border-bottom: 2px solid #fff;
            font-weight: bold;
        }
        .radio:nth-of-type(3):checked~.tab:nth-of-type(3){
            display: block;
        }
        .tab{
            display: none;
            width: 100%;
            height: 240px;
            font-size: 24px;
            text-align: center;
            line-height: 240px;
            border-top: 1px solid #d8d8d8;
            background-color: #fff;
        }

    </style>

纯CSS版的多页签跳转效果就这样实现了，是不是很简单。 但是效果虽然实现了，但是是有限制的，有什么限制了？

我觉得最大的限制是页面布局的限制。要想完完全全通过css实现多页签的跳转，页面的radio标签必须是与内容块是平级的或是与内容块的父级是同级的，因为是要通过radio的checked状态来找到相应的内容块从而通过控制内容块的显示与隐藏。

首先这里可能有个概念比较难以理解，什么叫页面的radio标签必须是与内容块的平级或是与内容块的父级是同级的
就拿实现的这个例子来说，页面布局必须是这样

<div id="main">
    <input checked="checked" id="radio" class="radio" type="radio" name="radio">
    <input id="radio1" class="radio" type="radio" name="radio">
    <input id="radio2" class="radio" type="radio" name="radio">
    <label for="radio">页签1</label>
    <label for="radio1">页签2</label>
    <label for="radio2">页签3</label>
    <div class="tab">页签内容1</div>
    <div class="tab">页签内容2</div>
    <div class="tab">页签内容3</div>
</div>

或者是给所有的tab元素加个父级，变成这样

<div id="main">
    <input checked="checked" id="radio" class="radio" type="radio" name="radio">
    <input id="radio1" class="radio" type="radio" name="radio">
    <input id="radio2" class="radio" type="radio" name="radio">
    <label for="radio">页签1</label>
    <label for="radio1">页签2</label>
    <label for="radio2">页签3</label>
    <div id="content">
        <div class="tab">页签内容1</div>
        <div class="tab">页签内容2</div>
        <div class="tab">页签内容3</div>
    </div>
</div>

但是一定不能是这样

<div id="main">
    <header>
        <input checked="checked" id="radio" class="radio" type="radio" name="radio">
        <input id="radio1" class="radio" type="radio" name="radio">
        <input id="radio2" class="radio" type="radio" name="radio">
        <label for="radio">页签1</label>
        <label for="radio1">页签2</label>
        <label for="radio2">页签3</label>
    </header>
    <div class="tab">页签内容1</div>
    <div class="tab">页签内容2</div>
    <div class="tab">页签内容3</div>
</div>