纯CSS实现选项卡

选项卡对于前端来说是一个熟悉的不能再熟悉的词了，用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，这里就不给出栗子啦

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

posted on 2015-05-12 13:01  __constructor  阅读(2825)  评论(0)  编辑  收藏  举报

导航