关于前端:实战-target-选择器解放生产力

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员. 如果喜爱我的文章，能够关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交换前端，成为更优良的工程师～关注公众号：搞前端的半夏, 理解更多前端常识! 点我摸索新世界！

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

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

上面是百度百科的介绍：

现代的锚是一块大石头，或是装满石头的篓筐，称为”碇“。碇石用绳系住沉入水底，依其分量使船停泊。起初有木爪石锚，即在石块两旁系上木爪，靠分量和抓力使船停泊。中国南朝已有对于金属锚的记录。中国现代帆船应用四爪铁锚，这种锚性能低劣，在舢板和小船上仍有应用。

当你想乘船的时候，船在湖上飘着，无奈登船，此时锚的作用就施展进去了，只有拉一下绳子，船就过去了！！！

网页开发中的锚点：网页内设置的一个地位，点击链接能够跳转到指定地位
以掘金文章详情页为例, 左边侧边栏有目录，当你点击其中的一个目录是不是会跳转到具体的内容。

有没有人好奇时如何实现的呢，没错就是锚点：通过 a 标签的 href 跳转到对应 id 的元素。

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

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

那么:target 跟这个有什么关系呢？？？往下看！！！

代表一个惟一的页面元素 (指标元素)，其 id 与以后 URL 片段匹配。
是不是有点难了解，其实也很简略，这里的:target 指的就是 h2，

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

target 选择器用于选取 以后流动 的指标元素

能够依据 id，设置指标元素跳转后的式样。

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

开始的时候指标是彩色的，当你点击跳转按钮后，页面跳到指标，且指标变成红色！

:target{color:red;}

留神察看字体色彩的变动。

首先定义一个导航栏 nav.

#nav {
  padding: 0px;
  position: fixed;
  height: 100%;
  top: 0;
  left:0;
  width: 100px;
  background: #2ecc71;
}

定义一个 a 标签关上导航

<a href="#nav"> 关上 </i></a>

当关上导航的时候应用 target

#nav:target {
  left: 0;
  transition: left 1s;
}

敞开的时候应用 not(target)

#nav:not(:target) {
  left: -100%;
  transition: left 1.5s;
}

成果：

残缺代码：

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>

创立内容

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

这里咱们设置了 div 的高度与父元素保持一致，并且未知绝对于父元素是固定的，所以只有第三个显示进去。

外围 :target+z-index

#tab-one:target,
#tab-two:target,
#tab-three:target {z-index: 1;}

成果：

简简单单的几行代码就能够实现 tab 的切换，我感觉很 OK!, 当然这个例子还有很多货色没有解决，比方选中后 tab 的款式等等，大家能够试着欠缺。

javascript 操作 CSS 的确不便简洁，容易实现，然而随着 CSS 的不断完善，越来越多的性能能够用 CSS 实现，大家要跟紧 CSS 的脚步

关于前端:实战-target-选择器解放生产力

前言

:target

用法

对应 id

全局

实战

滑出式导航抽屉

tab 切换

后记