实战 target 选择器,解放生产力!

大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

原文链接 ==>http://sylblog.xin/archives/57

前言

在正式学习:target 之前,我们先来学习一下网页开发中的锚点。

《实战 target 选择器,解放生产力!》

下面是百度百科的介绍:

古代的锚是一块大石头,或是装满石头的篓筐,称为”碇“。碇石用绳系住沉入水底,依其重量使船停泊。后来有木爪石锚,即在石块两旁系上木爪,靠重量和抓力使船停泊。中国南朝已有关于金属锚的记载。中国古代帆船使用四爪铁锚,这种锚性能优良,在舢板和小船上仍有使用。

当你想乘船的时候,船在湖上飘着,无法登船,此时锚的作用就发挥出来了,只要拉一下绳子,船就过来了!!!

网页开发中的锚点:网页内设置的一个位置,点击链接可以跳转到指定位置
以掘金文章详情页为例,右边侧边栏有目录,当你点击其中的一个目录是不是会跳转到具体的内容。
《实战 target 选择器,解放生产力!》
有没有人好奇时如何实现的呢,没错就是锚点:通过 a 标签的 href 跳转到对应 id 的元素。

<a href="#heading-2" title="语法">
    语法
  </a>

《实战 target 选择器,解放生产力!》

<h2 data-id="heading-2">语法</h2>

《实战 target 选择器,解放生产力!》

那么:target 跟这个有什么关系呢???往下看!!!

:target

代表一个唯一的页面元素(目标元素),其 id 与当前 URL 片段匹配 。
是不是有点难理解,其实也很简单,这里的:target 指的就是 h2,

heading-2:target{
}
<h2 data-id="heading-2">语法</h2>

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

用法

对应 id

可以根据 id,设置目标元素跳转后的式样。

#header:target{
    color:red;
}
<a href="#header">跳转</a>
<h2 id='header'>目标</h2>

开始的时候目标是黑色的,当你点击跳转按钮后,页面跳到目标,且目标变成红色!

《实战 target 选择器,解放生产力!》

全局

:target{
    color:red;
}

注意观察字体颜色的变化。

《实战 target 选择器,解放生产力!》

实战

滑出式导航抽屉

  1. 首先定义一个导航栏nav.
#nav {
  padding: 0px;
  position: fixed;
  height: 100%;
  top: 0;
  left:0;
  width: 100px;
  background: #2ecc71;
}
  1. 定义一个a标签打开导航
<a href="#nav">打开</i></a>
  1. 当打开导航的时候使用target
#nav:target {
  left: 0;
  transition: left 1s;
}
  1. 关闭的时候使用not(target)
#nav:not(:target) {
  left: -100%;
  transition: left 1.5s;
}

效果:

《实战 target 选择器,解放生产力!》

完整代码:

《实战 target 选择器,解放生产力!》

tab切换

tab切换其实有很多种实现方式,纯CSS,JS市面上的解决方案五花八门,既然介绍到了:target,自然就要用它来做了。

整体的解决方案是::target + z-index

先简单的说下原理:

:target只对当前激活的目标元素生效,所以只有激活的元素拥有z-index属性。

1.创建tab选项

<a href="#tab-one">tab1</a>
<a href="#tab-two">tab2</a>
<a href="#tab-three">tab3</a>

《实战 target 选择器,解放生产力!》
2. 创建内容

 <div class="tab-content">
  <div id="tab-one">我是tab1</div>
  <div id="tab-two">我是tab2</div>
  <div id="tab-three">我是tab3</div>
</div>

《实战 target 选择器,解放生产力!》
这里我们设置了div的高度与父元素保持一致,并且未知相对于父元素是固定的,所以只有第三个显示出来。
《实战 target 选择器,解放生产力!》

  1. 核心 :target+z-index
#tab-one:target,
#tab-two:target,
#tab-three:target {
  z-index: 1;
}

效果:

简简单单的几行代码就可以实现tab的切换,我觉得很OK!,当然这个例子还有很多东西没有处理,比如选中后tab的样式等等,大家可以试着完善。

《实战 target 选择器,解放生产力!》

后记

javascript操作CSS确实方便简洁,容易实现,但是随着CSS的不断完善,越来越多的功能可以用CSS实现,大家要跟紧CSS的脚步

    原文作者:搞前端的半夏
    原文地址: https://www.cnblogs.com/banxia-frontend/p/16240411.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞