This is the 31st day of my participation in the August More Text Challenge

Creation is not easy, click a “like” and then watch!

Pay attention to column – learn CSS thoroughly, let you into the CSS world

preface

Before we look at Target, let’s look at anchors in web development.

Here is the introduction of Baidu Baike:

In ancient times, the anchor was a large stone or basket full of stones, called “anchorage”. Anchor stones are roped to the bottom to anchor the ship according to their weight. Then came the wooden claw stone anchor, that is, the stone on both sides of the wooden claw, by weight and grip to anchor the ship. There are records of metal anchors in the Southern Dynasty of China. Ancient Chinese sailing ships used four-claw iron anchors, which are of excellent performance and still used in sampans and small boats.

When you want to take a boat, the boat is floating on the lake, you can’t board the boat, then the role of the anchor comes into play, just pull the rope, the boat is coming!!

Anchor point in web development: a location set up in the web page, click on the link to jump to the specified location. Take the gold digging article details page for example, the right sidebar has a directory, when you click on one of the directories will jump to the specific content.If anyone is wondering, it’s the anchor point: jump from the href of the A tag to the element with the corresponding ID.

<a href="#heading-2" title=" syntax ">Copy the code

<h2 data-id="heading-2"> syntax </h2>Copy the code

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. If it’s a little hard to understand, it’s actually very simple :target stands for H2,

Heading -2:target{} <h2 data-id="heading-2"> syntax </h2>Copy the code

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

usage

Corresponding to the id

Based on the ID, you can set the style of the target element after the jump.

#header:target{ color:red; } < a href = "# header" > jump < / a > < h2 id = 'header' > object < / h2 >Copy the code

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

global

:target{
    color:red;
}
Copy the code

Pay attention to the changes in font color.

In actual combat

Slide out navigation drawer

  1. Start by defining a navigation bar, nav.
#nav {
  padding: 0px;
  position: fixed;
  height: 100%;
  top: 0;
  left:0;
  width: 100px;
  background: #2ecc71;
}
Copy the code
  1. Define an A TAB to open the navigation
<a href="#nav"> Open </ I ></a>Copy the code
  1. Use target when opening navigation
#nav:target {
  left: 0;
  transition: left 1s;
}
Copy the code
  1. Use not(target) when closing
#nav:not(:target) { left: -100%; The transition: left 1.5 s; }Copy the code

Effect:

Complete code:

The TAB to switch

TAB switch in fact, there are many ways to achieve, pure CSS, JS solutions on the market are various, since the introduction of :target, naturally will use it to do.

The overall solution is: :target + Z-index

First, a brief explanation of the principle:

:target applies only to the currently active target element, so only the active element has the Z-index attribute.

1. Create the TAB option

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

2. Create content

<div id="tab-one"> I am tab1</div> <div id="tab-two"> I am tab2</div> <div id="tab-three"> I am tab3</div>  </div>Copy the code

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

  1. Core: target + z – index
#tab-one:target,
#tab-two:target,
#tab-three:target {
  z-index: 1;
}
Copy the code

Effect:

A simple few lines of code can achieve the TAB switch, I think it is OK! Of course, there are a lot of things that are not addressed in this example, such as the style of the selected TAB and so on, you can try to improve.

Afterword.

Javascript operation CSS is indeed convenient and simple, easy to implement, but with the continuous improvement of CSS, more and more functions can be implemented with CSS, we should follow the footsteps of CSS