Actual target selector, liberate productivity!

Hello everyone, I'm Pinellia 👴, a sand sculpture programmer who has just started writing articles. If you like my articles, you can follow ➕ Like 👍 Add me on WeChat: frontendpicker , learn and communicate front-end together, become a better engineer ~ pay attention to the public No.: Pinellia in front-end , learn more about front-end knowledge! Click me to explore the new world!

Original link ==> http://sylblog.xin/archives/57

foreword

Before formally learning :target, let's learn about anchors in web development.

The following is the introduction of Baidu Encyclopedia:

The ancient anchor was a large stone, or a basket full of stones, called an "anchor". Anchorites are sunk to the bottom by ropes, and the boats are moored according to their weight. Later, there were wooden claw stone anchors, that is, wooden claws were tied on both sides of the stone, and the ship was moored by weight and grip. There have been records of metal anchors in the Southern Dynasties of China. Ancient Chinese sailboats used four-claw iron anchors, which have excellent performance and are still used in sampans and boats.

When you want to take a boat, the boat floats on the lake and cannot board the boat. At this time, the role of the anchor comes into play. Just pull the rope and the boat will come! ! !

Anchor point in web page development: a location set in the web page, click the link to jump to the specified location. Take the Nuggets article details page as an example, there are directories in the right sidebar, when you click one of the directories, will you jump to it? to specific content.

Does anyone know how to implement it when they are curious, yes it is the anchor: jump to the element corresponding to the id through the href of the a tag.

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

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

So what does :target have to do with this? ? ? Look down! ! !

:target

Represents a unique page element (target element) whose id matches the current URL fragment.
Is it a bit difficult to understand? In fact, it is very simple. The :target here refers to h2.

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

The target selector is used to select the currently active target element

usage

corresponding id

You can set the style of the target element after the jump according to the id.

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

The target is black at the beginning, when you click the jump button, the page jumps to the target, and the target turns red!

global

 :target{
    color:red;
}

Pay attention to the change of font color.

actual combat

Slide out navigation drawer

1. First define a navigation bar nav.

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

2. Define an a tag to open the navigation

 <a href="#nav">打开</i></a>

3. use target when opening navigation

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

4. Use not(target) when closing

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

Effect:

Full code:

tab switching

There are actually many ways to implement tab switching. There are various solutions on the market for pure CSS and JS. Now that we have introduced: target, we will naturally use it to do it.

The overall solution is: :target + z-index

Let's briefly explain the principle:

:target only works on the currently active target element, so only the active element has a z-index attribute.

1. Create tab options

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

2. Create content

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

Here we set the height of the div to be consistent with the parent element, and the unknown is fixed relative to the parent element, so only the third one is displayed.

3. Core: target+z-index

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

Effect:

You can switch tabs with just a few lines of code. I think it's OK! Of course, there are still many things that have not been processed in this example, such as the style of the selected tab, etc. You can try to improve it.

postscript

JavaScript manipulation of CSS is really convenient, concise, and easy to implement. However, with the continuous improvement of CSS, more and more functions can be implemented with CSS. Everyone should keep up with the pace of CSS.