很少被知道的a标签功能

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

前言

我们在开发网页的时候，总会需要一些交互效果，比如点击一个按钮，显示/隐藏一个元素，或者点击对某个元素样式进行改变，那我们可能会这么做：

const oBtn = document.querySelector('#o-btn')
const oTarget = document.querySelector('#target')
oBtn.addEventListener('click', () => {
    oTarget.style.display = 'none'
})

javascript 实现点击隐藏一个元素，我们需要通过拿到两个元素然后定义一个点击事件

使用 css 隐藏一个元素需要两段 css 代码，通过使用 :target 这个伪类来实现

效果

:target

#target-node {
    display: flex;
}

#target-node:target {
    display: none;
}

<a href="#target-node">target-node</a>
<div id="target-node">即将被隐藏的元素</div>

当然其他样式也是可以的

#target-node:target {
    margin-left: 20px;
}

锚点

我们都知道 a 标签的 href 属性能够跳转网页、文件、电子邮箱或者其他超链接；

<a href="http://baidu.com">website</a>
<a href="mailto:xxxxx@xxxxx.com">email</a>
<a href="tel:+1231421412">1231421412</a>
<!-- 可以点击的图片链接 -->
<a href="http://baidu.com">
   <img src="http://xxxxxx.png" />
</a>

但是我们很少发现它还有这个用途，就是它能通过对页面拥有 id 属性的元素实现锚点定位，通过 href 属性指向具体锚点跳转到对应元素。

我们通过一个常见应用场景来体现上面这段话

<div class="flex" style="width: 200px;">
   <div class="fixed">
      <a href="#mine">我的</a>
      <a href="#category">分类</a>
      <a href="#theme">主题</a>
      <a href="#result">结果</a>
   </div>
   <div style="margin-left: 50px">
      <li id="mine">我的</li>
      <div style="height: 600px"></div>
      <li id="category">分类</li>
      <div style="height: 600px"></div>
      <li id="theme">主题</li>
      <div style="height: 600px"></div>
      <li id="result">结果</li>
      <div style="height: 600px"></div>
   </div>
</div>

.flex {
    display: flex;
}

.flex a {
    display: inline-block;
}

.fixed {
    position: fixed;
    top: 50%;
    width: 50px;
}

可能还有很多其他元素的功能我们没有注意到，还需要多去探索，查缺补漏。