打造没有,可以实现纯css的tab效果切换

作者: 前端知识  发布:2019-09-14

巧用 CSS 的 :target 选择器,打造没有 JS 的 UI 效果

2016/07/07 · CSS · 选择器

本文由 伯乐在线 - 刘健超-J.c 翻译,sunshinebuel 校稿。未经许可,禁止转载!
英文出处:Sara Soueidan。欢迎加入翻译组。

除了链接到新页面,链接元素(<a> 标签)还可以引用到某章节、片段或其它同页面元素,而这几类链接普遍运用于同一页面的导航。

CSS 伪类选择器 :target 是文档内部链接,通过链接元素的 href 属性指定页面某部分,然后选择和为目标元素添加样式的。例如,如果你有一个锚点标签是链接到一篇文章的“深度阅读”部分…

XHTML

<a href="#further-reading" title="Further reading resources" /> <!– … –> <section id="further-resources" > <!— … —> </section>

1
2
3
4
5
6
7
8
9
<a href="#further-reading" title="Further reading resources" />
 
<!– … –>
 
<section id="further-resources" >
 
<!— … —>
 
</section>

…点击锚点链接后,你可以使用 :target 选择器强调目标元素,以引导阅读者眼球。该高亮技术是众所周知的褪黄技术,并在 37 Signals 首次使用。

CSS

#further-resources:target { animation: highlight .8s ease-out; } @keyframes highlight { 0% { background-color: #FFFF66; } 100% { background-color: #FFFFFF; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
#further-resources:target {
 
animation: highlight .8s ease-out;
 
}
 
@keyframes highlight {
 
0% { background-color: #FFFF66; }
 
100% { background-color: #FFFFFF; }
 
}

这技术要求你使用 CSS animation 在短暂时间内显示颜色,然后再次移除颜色 – 要点是高亮能足以引导用户注意到这里。看看 展示了这项技术运作的在线案例。

See the Pen ogBWmL by Sara Soueidan (@SaraSoueidan) on CodePen.

上面案例给链接的目标元素应用了短暂的样式。但如果你应用更持久的样式,你可以创建缩放元素、改变它们可见度等等。

最近,我在 自己网站 上运用了这项技术,当浏览者想搜素文章时,搜索域覆盖整个页面。作为主导航的一部分,有一个链接是让搜索域覆盖整个页面 – 一个包含着搜索输入框的 <div> 标签。

XHTML

<a href="#search">Search</a> <!– … –> <div id="search"> <a href="#">Close</a> <h4>Search articles archive.</h4> <!– … –> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<a href="#search">Search</a>
 
<!– … –>
 
<div id="search">
 
<a href="#">Close</a>
 
<h4>Search articles archive.</h4>
 
<!– … –>
 
</div>

这个搜索域初始时是通过使用 opacity : 0; 进行隐藏的。并通过 position : fixed; 让其相对于视口进行定位。为了确保它不会挡住它下面其余页面的鼠标事件,设置 pointer-eventsnone.

CSS

#search-overlay { position: fixed; top: 1em; bottom: 1em; right: 1em; left: 1em; /* … */ opacity: 0; transition: opacity .3s ease-in-out; pointer-events: none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#search-overlay {
 
position: fixed;
 
top: 1em;
 
bottom: 1em;
 
right: 1em;
 
left: 1em;
 
/* … */
 
opacity: 0;
 
transition: opacity .3s ease-in-out;
 
pointer-events: none;
 
}

使用 :target 选择器后,一旦搜索锚点被点击,覆盖域就会显示,并将 pointer-event 再次设置为 auto。 为了让覆盖域显示过程更流畅,可通过 CSS3 的 transition 创建一个淡入淡出的效果。

CSS

#search-overlay:target { opacity: 1; pointer-events: auto; }

1
2
3
4
5
6
7
#search-overlay:target {
 
opacity: 1;
 
pointer-events: auto;
 
}

搜索域淡入。任务完成一半 – 当用户再次请求时,我们需要确保它能淡出。

该覆盖域容器需包含其它允许我们回到主页面的链接。因此,我们打算给 bodyhtml 元素一个 ID,并有一个关闭按钮链接到该 ID —这也能达到目的。然而,没有必要这样做。因为链接到非特定片段,只需将 # 作为它的值。实际上,无须为页面上的 URL 添加任何片段标识符,就能链接到主页面。

一旦关闭按钮链接被点击,我们希望搜索域淡出,所以我们为 #search-overlay:target 再次添加 transition ,并确保 opacity 能过渡到 0。  当然,如果想在用户关闭它时,让它立刻消失,你可以忽略这一步。

CSS

#search-overlay:target { opacity: 1; pointer-events: auto; transition: opacity .3s ease-in-out; }

1
2
3
4
5
6
7
8
9
#search-overlay:target {
 
opacity: 1;
 
pointer-events: auto;
 
transition: opacity .3s ease-in-out;
 
}

看看这个 在线案例。

你可以为搜索域添加变形动画,进一步增强效果。例如在淡入时伴随着放大效果 – 类似于(是的,你应该猜到了) Lightbox  效果。搜索域中不是搜索表单,而是一张图像的话,当你点击它的缩略图时,它会伴随能放大效果进入你的视线。Manoela Ilic 有一个很细致完整的图片 画廊 ,它就是基于这个效果做的。并且在它后面有一个教程,解释代码的运行。

Christian Heilmann 也写了一个关于如何使用 :target 选择器创建简易图片画廊的 帖子,并值得我们学习。

只使用 CSS 实现的图像画廊、模拟框 和 off-canvas 导航 都是功能齐全的 UI 组件案例。通过利用 :target 选择器的优势,它们只需使用 CSS 就可以完成。

我希望通过这篇文章的介绍,在你需要为目标元素添加样式时,CSS 伪类选择器能成为你实现方式之一。

更多教程和惊喜!

打赏支持我翻译更多好文章,谢谢!

打赏译者

基础知识: :target起作用的是href连接到的位置

<a href="#tab1">tab1</a>
<div id="tab1" class="tab">This is a tab1</div>

:target{
    color:red;
}

但点击a标签的时候,连接到id是tab1的div,对这个div起作用color:red;

如:

<a href="#tab">Test :target</a>
<a href="#tab2">Test 2:target</a>
<div id="tab">This is a tab.</div>
<div id="tab2">This is another tab.</div>

#tab:target{
    color:red;
}
#tab2:target{
    color:blue;
}

结果:

点击第一个a标签时连接到id是tab的div,对这个div起作用color:red;

图片 1

点击第二个a标签时连接到id是tab2的div,不对这个div起作用color:red;

图片 2

利用target的特性,可以实现纯css的tab效果切换

具体代码:(ie8以及ie8以下实现不了)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/*public*/
body{
        margin: 0;
        padding: 0;
    }
a {
    color:#98a61a
}
a:hover {
    color:#006acd
}
ul {
    list-style:none
}

 /*样式开始 */
.tablist {
    position:relative;
    margin:200px;                      /*为了效果*/
    width: 632px;                    /*宽度为单个文本框宽度 padding border*/
    height:200px;                    /*高度为单个文本框高度 padding*/
}
.tabmenu {
    position:absolute;
    top:100%;                        /*标签选项在文本框下面显示*/
    margin:0;
}
.tabmenu li{
    display:inline-block;            /*标签选项并排显示*/
}
.tabmenu li a {
    display:block;
    padding:5px 10px;                 
    margin:0 10px 0 0;                  /*为了效果    */
    border:1px solid #91a7b4;         /*边框效果    */
    border-radius:0 0 5px 5px;    
    -moz-border-radius:0 0 5px 5px;
    -webkit-border-radius:0 0 5px 5px;  /*圆角效果*/
    color:#333;                         /*字体颜色*/
    background:#e3f1f8;                /*背景颜色*/
}
.tab_content {
        position: absolute;
        width:600px;
        height:170px;                    /*大小*/
        padding:15px;                    /*为了效果*/
        border:1px solid #91a7b4;        /*边框效果    */
        border-radius:3px;            
        -moz-border-radius:3px;
        -webkit-border-radius:3px;         /*圆角效果*/
        box-shadow:0 2px 3px rgba(0,0,0,0.1);
        -moz-box-shadow:0 2px 3px rgba(0,0,0,0.1);
        -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.1);         /*阴影效果*/
        word-wrap: break-word;                                 /*超出换行*/
        font-size:18px;                    /*字体大小*/
        line-height:27px;                
        color:#666;                        /*字体颜色*/
        background:#fff;                /*背景颜色*/
    }

 /*核心代码 */
#tab1:target, #tab2:target, #tab3:target {
    z-index: 1;
}   
</style>
</head>
<body>
<div class="tablist" >
    <ul class="tabmenu">
        <li><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
    </ul>
    <div id="tab1" class="tab_content">tab1</div>
    <div id="tab2" class="tab_content">tab2tab2</div>
    <div id="tab3" class="tab_content">tab3tab3tab3</div>
</div>
</body>
</html>

效果图如下:

图片 3

最关键的代码:

#tab1:target, #tab2:target, #tab3:target {//链接到#tab1,#tab2,#tab3时z-index为 1
        z-index: 1;
}    

原理其实很简单,就是把tab元素设为绝对对定位absolute,再通过:target伪类改变它们的层级(z-index)。

先根据target的特性锚链接到对应的div,再根据z-index的属性,改变div的层级关系,从而实现tab的切换效果!

初始z-index:auto,根据target的特性锚链接到对应的div,设置z-index:1;

图片 4

图片 5

Tab1按钮

<a href="#tab1">tab1</a>

指向的是

图片 6

Tab2按钮

<a href="#tab1">tab1</a>

指向的是第二个

Tab3按钮

<a href="#tab1">tab1</a>

指向的是第三个

点击Tab1按钮时z-index值:

图片 7

图片 8

图片 9

知识点:

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 10 图片 11

1 赞 5 收藏 评论

1. CSS3 :target 选择器(w3school)

定义和用法

URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

:target 选择器可用于选取当前活动的目标元素。

 图片 12

例子:

<!DOCTYPE html>
<html>
<head>
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p>请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

<p><b>注释:</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>

</body>
</html>

结果:

当我点击“跳转至内容 1”的时候,变成了这样

图片 13

延伸知识点:(参考资料CSS3制作手风琴——CSS3 :target的应用)

我们可以先来看看今天我们要实现的效果

图片 14

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
    a {
        color: #424242;
        text-decoration: none;
    }  
    .accordionMenu {
        width: 500px;
        font: 12px Arial, Verdana, sans-serif;    /*字体设置*/
        color:#424242;                            /*字体颜色*/
        background: #fff;                        /*背景颜色*/        
    }
    .accordionMenu h2 {
        margin:5px 0;                            /*清除样式*/
        position: relative;
    }
    .accordionMenu h2:before {
        content:"";
        border: 5px solid #fff;
        border-color: #fff transparent transparent;
        width: 0;
        height: 0;
        position:absolute;
        right: 10px;
        top: 15px;
    } 
    .accordionMenu h2 a {
        font-size: 13px;
        display: block;
        padding:10px;
        background: #8f8f8f;
        background: -moz-linear-gradient( top, #cecece, #8f8f8f); 
        background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f)); 
        background: -webkit-linear-gradient( top, #cecece, #8f8f8f); 
        background: -o-linear-gradient( top, #cecece, #8f8f8f);     /*css渐变色,下次专门开篇文章介绍*/
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#ff8f8f8f); 
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#f8f8f8f)"; /*针对ie浏览器的css渐变色*/
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;                                /*圆角*/
        text-shadow:2px 2px 2px #aeaeae;    
        -webkit-text-shadow:2px 2px 2px #aeaeae;
        -moz-text-shadow:2px 2px 2px #aeaeae;            /*文字阴影,下次专门开篇文章介绍*/
    }
    .accordionMenu :target h2 a,
    .accordionMenu h2 a:focus,
    .accordionMenu h2 a:hover,
    .accordionMenu h2 a:active {
    background: #2288dd;
    background: -moz-linear-gradient( top, #6bb2ff, #2288dd);
    background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
    background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);
    background: -o-linear-gradient( top, #6bb2ff, #2288dd);/*css渐变色,下次专门开篇文章介绍*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd)";
    color:#FFF;
    }    

    .accordionMenu p {
        margin:0;/*清除样式*/
        height: 0;
        overflow: hidden;/*初始不显示,所以高度设为0,超出隐藏*/
        -moz-transition: height 0.5s ease-in;
        -webkit-transition: height 0.5s ease-in;
        -o-transition: height 0.5s ease-in;
        transition: height 0.5s ease-in;            /*动画transition,下次专门开篇文章介绍*/
    }
    .accordionMenu :target p {
        overflow: auto;
        height:100px;
    }
    .accordionMenu :target h2:before {
        border-color: transparent transparent transparent #fff;
    }

</style>
</head>
<body>
<div class="accordionMenu">
    <div class="menuSection" id="brand">
        <h2><a href="#brand">Brand</a></h2>
        <p>content for Brand</p>
    </div>
    <div class="menuSection" id="promotion">
        <h2><a href="#promotion">Promotion</a></h2>
        <p>content for promotion</p>
    </div>
    <div class="menuSection" id="event">
        <h2><a href="#event">Event</a></h2>
        <p>content for Event</p>
    </div>
</div>

</body>
</html>

难理解的样式

1.accordionMenu :target p

2.accordionMenu :target h2:before

3.accordionMenu :target h2 a 

下面我们来分析一下:

原理:

1.使用了“div.accordionMenu”包装了手风琴所有块;

2.“div.menuSection”包含手风琴每块的标题和主内容

3.把手风琴每块的标题定义为“h2”

4手风琴每块主内容放在了一个“p”中,并与“h2”相邻,当然大家也可以把主内容放置在一个“div”中,容易管理

5.此处最关键的一点是正如前面介绍“target”,我们使用“target”来达到点击展开动画效果,我们每一块需要ID来配合使用,因此我们在手风琴中的每一块中定义了一个ID号,并且在标题中的“<a>”链接的“href”属性链接了相对应块的ID号。

这一步是我们这个教程中最为关键的一步,我们使用了CSS3的伪类“:target”实现点击面板标题时,改变面板主内容“p”的高度。

.accordionMenu :target p {
                overflow: auto;
                height:100px;
 }    

图片 15

第一个a标签点击链接到

<div class="menuSection" id="brand"></div>

也就是这里

图片 16

要想使brand模块展开的话,改变面板主内容“p”的高度。

可以这样写

# brand:target p {
        overflow: auto;
        height:100px;
    }

第二个a标签点击链接到

<div class="menuSection" id="promotion"></div>

也就是这里

 图片 17

要想使promation模块展开的话,改变面板主内容“p”的高度。

可以这样写

# promation:target p {
        overflow: auto;
        height:100px;
    }

第三个a标签点击链接到

<div class="menuSection" id="event"></div>

关于作者:刘健超-J.c

图片 18

前端,在路上... 个人主页 · 我的文章 · 19 ·     

图片 19

也就是这里

图片 20

要想使Event模块展开的话,改变面板主内容“p”的高度。

可以这样写

#Event:target p {
        overflow: auto;
        height:100px;
}

这三个样式的的内容是一样的,

可以用他们的父元素:target p来设置样式以优化代码

得到:

.accordionMenu :target p {
        overflow: auto;
        height:100px;
}

另外两个难理解的样式涉及到了:before和用boder画三角的知识,这里就先不讲了,之后会专门写文来探讨下这2部分内容。

(可以看这里:纯css来画图-border应用)

本文由金沙澳门官网发布于前端知识,转载请注明出处:打造没有,可以实现纯css的tab效果切换

关键词: 金沙澳门官网

上一篇:选择办法介绍
下一篇:没有了