css3中target|CSS3中target实现选项卡切换效果

更新时间:2019-11-05    来源:css3教程    手机版     字体:

【www.bbyears.com--css3教程】

:target是什么?

MDN是这样描述的::target

The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.
在document中,可以设置锚链接,举个粟子:

Test :target
Test 2:target
This is a tab.
This is another tab.

上面存在两个锚链接:#tab和t#ab2。当点击锚链接时,就会跳到对应的div,则::target就是给这些div用的。添加一下CSS


:target{
    color:red;
}
#tab:target::after{
    content:"tab1"
}

点击锚链接,对应链接的div的文本变成红色,另外,给#tab后面插入一个文本。(ps:关于content属性用法:CSS3的content属性详解)


应该大致明白了:target的含义了吧,如果不知道用,看看这篇文章:Using the :target selector

:target可以做什么

最简单的用处:利用:target实现选项卡切换。

HTML:


    tab1
    tab2
    tab3


    This is a tab1
    This is a tab2
    This is a tab3

CSS:

.tab-control a{
    display:inline-block;
    text-decoration:none;
    color:#FFF;
    height:20px;
    width:40px;
    text-align:center;
    line-height:20px;
    background:rgba(70,121,189,0.75);
}
.tab-control a:hover{
    background:rgba(70,121,189,1);
}
.tabs{
    position:relative;
    border:1px solid red;
    height:200px;
    width:135px;
    overflow:hidden;
}
.tab{
    height:100%;
    width:100%;
}
:target{
    display:block;
}


当然,:target的功能不仅局限于此。隐藏元素、创建lightbox 等。MDN上给了很多个demo:more demo.
你自己也可以脑洞大开一下,哈哈。

浏览器支持


对于:target伪类,浏览器支持情况还是不错的。

:target

 

本文来源:http://www.bbyears.com/css/77372.html