纯CSS实现选项卡

时间:2021-10-03 06:27:31

选项卡对于前端来说是一个熟悉的不能再熟悉的词了,用js也很容易实现,自己无聊之下用纯CSS实现,把自己的思路贡献给大家,自己水平有限用了两种方法,如果有路过的大神希望提供更多的思路~

选项卡的核心是什么,是当一个元素有事件产生的时候,去影响另外一个元素的某些CSS属性(display、z-index…)

我们一般指的事件是click啊、mouseover啊,CSS中可没办法实现这样的,不过CSS中有hover,这个放在后面说,我们先来利用hash的变换配合:target选择器实现选项卡功能

1、使用:target选择器

注意:IE8及其以下不支持

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    #wrap{ width:600px; height:400px; border:5px solid red; margin:10px auto;}
    body,ul{ margin:0; padding:0;}
    li{ list-style:none;}
    #title{ margin:5px 0 0 110px;}
    #title a{ float:left; width:118px; height:40px; text-align:center; line-height:40px; border:1px solid black; margin-right:10px; cursor:pointer;}
    .clear{ zoom:1;}
    .clear:after{ content:''; display:block; clear:both;}
    
    #content{ margin:0 0 0 110px; position:relative;}
    #content li{ border:1px solid black; position:absolute; left:0px; top:10px; width:378px; height:300px; display:none; background:white;}
    
    #content li:target{ display:block;}  //重点
</style>
</head>

<body>
    <div id="wrap">
        <ul id="title" class="clear">
            <a class="active" href="#d1">1</a>
            <a href="#d2">2</a>
            <a href="#d3">3</a>
        </ul>
        <ul id="content">
            <li id="d1">11111</li>
            <li id="d2">22222</li>
            <li id="d3">33333</li>
        </ul>
    </div>
</body>
</html>

 

直接复制保存浏览器打开就好,再次提示IE8及其以下不支持

原理就是利用点击a标签,然后url会更改href对应的hash,然后#content li:target变换,实现选项卡

注意::target中找到的hash必须是其元素的id,代码中a中的href对应li的id

不足:当刚打开的时候地址栏没有hash的时候,#content中所有li的display都是none,给用户看到的内容部分都是空的

解决办法其实也很简单:

#d1{ display:block}

默认第一个li的display是block就可以了,反正后面的li变成block的时候可以把它遮住

不过自己挺有强迫症的,但折腾了半天也没能实现同一时刻#content内容区域只有一个div是display为block

尝试了:not选择器,fail!

尝试了counter配合z-index,这两者根本就不能配合!counter貌似只能配合content,fail!

晕晕晕,不纠结这个了,看一下个方法实现,如果有人知道如何实现,希望指点一二,万分感谢!

 

2、使用~选择符

注意:不支持IE8及其以下,这个方法非常的不方便,原因有三

第一是布局复杂麻烦,第二是布局复杂麻烦,第三是布局复杂麻烦,重要的事说三遍

大家也就是看着乐呵乐呵好了,百分百不实用的方法

代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    #wrap{ width:600px; height:400px; border:5px solid red; margin:10px auto; position:relative;}
    body,ul,input{ margin:0; padding:0;}
    li{ list-style:none;}
    
    .box{ width:400px; height:350px; position:absolute; left:100px; top:50px;}
    .title{ width:120px; border:1px solid black; position:absolute; height:40px; cursor:pointer; text-align:center; line-height:40px; top:-40px;}
    input{ display:none;}
    .box:nth-of-type(1) .title{ left:0;}
    .box:nth-of-type(2) .title{ left:130px;}
    .box:nth-of-type(3) .title{ left:260px;}
    .content{ width:380px; height:300px; position:absolute; top:10px; left:0; border:1px solid black; background-color:white; display:none;}
    
    .title:hover{ background-color:red;}
    input.title:checked ~ li{ display:block;}
</style>
</head>

<body>
    <div id="wrap">
        <ul class="box">
            <label for="d1" class="title">1</label>
            <input type="radio" class="title" name="r" id="d1" />
            <li class="content" style="display:block">111</li>
        </ul>
        <ul class="box">
            <label for="d2" class="title">2</label>
            <input type="radio" class="title" name="r" id="d2" />
            <li class="content">222</li>
        </ul>
        <ul class="box">
            <label for="d3" class="title">3</label>
            <input type="radio" class="title" name="r" id="d3" />
            <li class="content">333</li>
        </ul>
    </div>
</body>
</html>

原理是用过点击radio然后用过:checked这个选择器获取到元素,然后用过~选择符获取到content内容部分

因为~只支持相邻元素,很操蛋的布局,而且为了隐藏radio控件也花了心思

刚开始尝试将radio的透明度设置为0,成功倒也可以,可是一点交互效果也没有了

比方说鼠标在经过上面title部分没法实现变色,因为radio层级最高,给它设置background这一个属性没有效果,让另外一个元素遮住radio的话又无法实现点击选取

通过label勉强能实现鼠标经过时title变色,但是鼠标移开又没有了,其实第一种方法也只能实现到如此结局

求助纯CSS能否实现像js中那样,上面title为active状态时有背景颜色,同时下面content为active状态时显示内容

表述的可能有点复杂……语文一直是体育老师教的

这就是我给出的两个纯CSS打造选项卡的栗子……

其实纯CSS打造nav子栏目还是挺方便的,配合:hover,这里就不给出栗子啦

结语:好久没有写东西了,这次赶紧补一篇文章。最近好忙,六月份去实习,力争这段时间把自己的知识给总结再扩充扩充,毕竟不能过去太丢人嘛。之前说签了阿里,后面个人原因选择去企鹅了,不管怎么样,努力学习!