css 伪类target_使用：target伪类的纯CSS单击处理程序（无JavaScript）

css 伪类target

There’s often a point when you’re building a website, especially a simple landing page, when you realize you’re going to have to introduce some JavaScript. CSS, however, can often do a lot more than we give it credit for. Here we’ll look at creating click handlers with only CSS! 🔥

在构建网站(尤其是简单的登录页面)时，通常会意识到必须引入一些JavaScript。 但是，CSS常常可以做很多事，超出了我们的功劳。 在这里，我们将介绍仅使用CSS创建点击处理程序！ 🔥

Let’s say we’re building an HTML and CSS landing page and we decide we want a “See more!” button to display a section of text. As soon as we think of a click event, usually it leads us to one word: JavaScript.

假设我们正在构建HTML和CSS登陆页面，然后我们决定要“查看更多！” 按钮显示一段文字。 当我们想到点击事件时，通常会把我们引到一个词：JavaScript。

As web developers, most of us spend a lot of time with JavaScript– and that’s great! However, there are tons of things we can do with just CSS that we may not even know about! 💅

作为Web开发人员，我们大多数人都花很多时间在JavaScript上，这真是太好了！ 但是，使用CSS可以做很多事情，而我们甚至可能不知道！ 💅

---

---

CSS伪类：target (The CSS Pseudo-Class :target)

There are lots pseudo-classes in CSS that can help us style elements in different states. For example, you can style a button when it’s hovered, active, focused, etc.

CSS中有许多伪类可以帮助我们为处于不同状态的元素设置样式。 例如，您可以在按钮悬停，活动，集中等情况下设置按钮的样式。

One pseudo-class you might not have heard about, though, is the :target pseudo-class.

但是，您可能没有听说过的一个伪类是:target伪类。

The :target pseudo-class is used to select an element when that element’s ID matches part of the current URL.

:target伪类用于选择一个元素的ID匹配当前URL的一部分时的元素。

元素的ID何时与URL匹配？ (When Would an Element’s ID Match a URL?)

A common use case for having an element’s ID show up in the URL is if you’re using an anchor tag (<a>) to jump to a specific spot on the current page. For example, if it’s your personal website, you might have a “Contact” button at the top of the page. On click, it could bring the user to the footer to see all your contact information.

在URL中显示元素ID的常见用例是，如果您使用锚标记( <a> )跳转到当前页面上的特定位置。 例如，如果是您的个人网站，则页面顶部可能有一个“联系”按钮。 单击后，可以将用户带到页脚以查看您的所有联系信息。

使用锚标签在页面上跳转位置 (Using an Anchor Tag to Jump Positions on the Page)

If you’ve used an <a> tag before, you’re likely familiar with the href attribute. If you’re trying to link to a website, like Alligator.io for example, you’d create the link in your HTML like this:

如果以前使用过<a>标记，则可能熟悉href属性。 如果您尝试链接到一个网站(例如Alligator.io)，则可以在HTML中创建链接，如下所示：

<a href='https://alligator.io'>
  Click me! 🐊
</a>

However, if you want your user to stay on the current page and jump down to the footer, for example, all you have to do is set an ID on the footer and use that ID for the href value in the <a> tag.

但是，例如，如果您希望用户停留在当前页面上并跳到页脚，那么您要做的就是在页脚上设置一个ID，并将该ID用作<a>标记中的href值。

<a href='#footer'>
  Go to the footer!
</a>

When the user clicks on this footer link, the page will jump to the footer and their current URL will get updated to look like:

当用户单击此页脚链接时，页面将跳至页脚，其当前URL将更新为以下形式：

https://www.imawebsite.com/#footer

The footer element’s ID is now part of the current URL. In other words, it’s the target! 🤓

页脚元素的ID现在是当前URL的一部分。 换句话说，这就是目标！ 🤓

---

---

使用：target创建点击处理程序 (Creating Click Handlers with :target)

Now that we know how to create a target with HTML, how do we use that target to create a click handler without any JavaScript? Thankfully, it takes just a little CSS! 🌈

现在，我们知道了如何使用HTML创建目标，如何使用该目标来创建没有任何JavaScript的点击处理程序？ 幸运的是，只需要一点CSS！ 🌈

Using our “See more!” button example from above, let’s start by creating a link to see more text:

使用我们的“查看更多！” 从上面的按钮示例开始，我们首先创建一个链接以查看更多文本：

<a href='#seeMore'>
  See more!
</a>

Our section of text we want to see doesn’t exist yet, so let’s create that too.

我们要查看的文本部分尚不存在，因此我们也创建它。

<a href='#seeMore'>
  See more!
</a>

<section id='seeMore'>
  <p>
    Here's some more info that you couldn't see before. I can only be seen after you click the "See more!" button.
  </p>
</section>

When you click the “See more!” button, the URL will update to look like this:

当您单击“查看更多！” 按钮，URL将更新为如下所示：

https://www.imawebsite.com/#seeMore

The problem we have now is that the #seeMore section is visible to the user even though it’s not supposed to be yet! 🙈

现在的问题是，即使不应该看到#seeMore部分，它也对用户可见！ 🙈

Since this is all the HTML we’ll need so far, let’s add our CSS to manage showing the text block on click.

到目前为止，由于这是我们所需的所有HTML，因此让我们添加CSS来管理单击时显示文本块。

First, let’s hide the text that shouldn’t show yet.

首先，让我们隐藏不应该显示的文本。

<style>
  #seeMore {
    display: none;
  }
</style>

Now the text in the #seeMore section doesn’t show on load or when you click the “See more!” button. This is where the :target styling comes in. Let’s use the :target pseudo-class to update the styling when the “See more!” button gets clicked.

现在， #seeMore部分中的文本不会在加载或单击“查看更多！”时显示。 按钮。 这就是:target样式的体现。让我们使用:target伪类在“查看更多！”时更新样式。 按钮被点击。

<style>
  #seeMore {
    display: none;
  }

  #seeMore:target {
    display: block;
  }
</style>

It is literally as simple as that! On load, our text section will not show. As soon as you click the “See more!” button, it will add #seeMore to the URL and the #seeMore section becomes the target. Once #seeMore becomes the target, it will have its :target styling applied, which displays the text. 🥳

就这么简单！ 加载时，我们的文本部分将不会显示。 只要您点击“查看更多！” 按钮，它将在网址中添加#seeMore ，并且#seeMore部分成为目标。 一旦#seeMore成为目标，它将应用其:target样式，以显示文本。 🥳

---

---

使用：target切换显示 (Using :target to Toggle the Display)

If an element wasn’t visible to begin with, you will probably want the option to hide it again.

如果一开始就看不见某个元素，则您可能希望该选项再次将其隐藏。

Luckily, we can do that with just one more line of HTML (no CSS!) 💪

幸运的是，我们可以只用一行HTML来完成此操作(不需要CSS！)💪

Using the same example as above, let’s expand the HTML to include a “Hide text” button.

使用与上述相同的示例，让我们扩展HTML以包含“隐藏文本”按钮。

<a href='#seeMore'>See more!</a>

<section id='seeMore'>
  <p>
    Here's some more info that you couldn't see before. I can only be seen after you click the "See more!" button.
  </p>

  <a href='#'>Hide text</a>
</section>

Notice that there’s a new <a> tag in the text section. Since it’s in the element that only shows when the user clicks “See more!”, the “Hide text” button will only show if the hidden text becomes visible. That is, the user doesn’t need to see the button to hide text unless there’s text to hide.

请注意，文本部分中有一个新的<a>标记。 由于该元素仅在用户单击“查看更多！”时显示，因此“隐藏文本”按钮仅在隐藏文本变为可见时显示。 也就是说，除非有文字要隐藏，否则用户无需查看按钮即可隐藏文字。

The href value on the “Hide text” button is “#”. This is because we want to update the URL to no longer include #seeMore. When the “Hide text” button is clicked, it will update the URL to look like this:

“隐藏文本”按钮上的href值为“＃”。 这是因为我们要更新URL，使其不再包含#seeMore 。 单击“隐藏文本”按钮时，它将更新URL，如下所示：

https://www.imawebsite.com/#

With the URL updated, #seeMore is no longer the target, and the #seeMore:target styling no longer gets applied. The block of text (including the “Hide text” button) will, therefore, go back to having the display: none; styling applied.

更新网址后， #seeMore不再是目标，并且#seeMore:target样式也不再适用。 因此，文本块(包括“隐藏文本”按钮)将返回display: none; 样式应用。

In short, update the URL and the text that was originally not displayed goes back to not being displayed. We officially have a way to toggle the text! ✨

简而言之，更新URL，原来不显示的文本又回到不显示。 我们正式有办法切换文字！ ✨

---

---

何时使用示例：target (Examples of When to Use :target)

If you’re not sure when you would actually use the :target pseudo-class, here are some examples of how you could:

如果不确定何时实际使用:target伪类，请参考以下示例：

• Click a hamburger icon to show your site’s navigation menu. Include an icon to close the navigation.
  单击一个汉堡图标以显示您站点的导航菜单。 包括一个图标以关闭导航。
• Click an icon to display a modal. (Note: Make sure your modals are accessible if you’re going to use them! 🤓)
  单击一个图标以显示模式。 (注意：如果要使用模态，请确保它们是可访问的！)
• Update the styling of the currently selected tab in your navigation bar when it gets clicked.
  单击时，更新导航栏中当前所选选项卡的样式。

浏览器支持 (Browser Support)

The browser support for the :target pseudo-class is fantastic and you basically don’t need to worry about it unless you’re supporting IE8. As always, though, check Can I Use to be sure. 🚀

浏览器对:target伪类的支持非常出色，除非您支持IE8，否则您基本上不必担心。 与往常一样， 请确保可以使用 。 🚀

翻译自: https://www.digitalocean.com/community/tutorials/css-css-only-click-handler

css 伪类target