HTML中总结实现tab切换的几种可行方法

最新推荐文章于 2024-06-19 10:23:02 发布

Conan_W

最新推荐文章于 2024-06-19 10:23:02 发布

阅读量7.5k

点赞数 2

分类专栏： HTML CSS Javascript

本文链接：https://blog.csdn.net/qq_35389653/article/details/109636747

版权

Javascript 同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

HTML

24 篇文章 1 订阅

订阅专栏

CSS

16 篇文章 1 订阅

订阅专栏

BAT大家都不陌生，B:代表Baidu.com,A:代表Alibaba.com,T:代表Tencent.com,对于很多程序员来说，这就是梦想，但是对于小编来讲，适合自己的才是最重要的。

言归正传，今天我们来学习一下，在web初期我们学习了CSS之后，还没有正式接触JS的时候，如何使用CSS的样式取实现tab切换。应为这个function是我们在写静态页面的时候经常用的基本function.，首先，我们需要知道的是纯CSS实现页面的切换，需要面临两个问题：

Q1: 如何执行点击事件？
Q2: 如何操作相关的DOM？

在纯CSS中能够触发点击事件的有三种方式：标签的href属性，的radio类型的checked选择器，还有就是focus-within的方式。还有就是就是标签的window.location.href实现跳转，但是好像没有切换的功能。

法一：input的radio类型和 checked伪类实现tab切换
拥有 checked属性的表单元素， <input type="radio"> 或者<input type="checkbox">能够接收到点击事件。

知识点:

1. 使用 radio标签的 :checked 伪类，加上实现纯 CSS 捕获点击事情
1. 使用了 “~” 选择符对样式进行控制

<html>
<style>
//其他的样式已经省略
//默认情况下的内容区域的不可见
.content1,.content2 {
  display: none;
}
//点击按钮1之后，先触发所有的为默认颜色
.nav1:checked ~ .nav li {
  background: #ddd;
  color: #000;
}
//点击按钮1之后，再触发点击的按钮颜色为设置颜色
.nav1:checked ~ .nav li:first-child {
  background: #ff7300;
  color: #fff;
}
//点击按钮2之后，先触发所有的为默认颜色
.nav2:checked ~ .nav li {
  background: #ddd;
  color: #000;
}
//点击按钮2之后，先触发所有的为默认颜色
.nav2:checked ~ .nav li:last-child {
  background: #ff7300;
  color: #fff;
}

//点击按钮1之后，先触发所有的内容不显示
.nav1:checked ~ .content > div {
  display: none;
}
//点击按钮1之后，再触发的按钮1对应的内容显示
.nav1:checked ~ .content > div:first-child {
  display: block;
}
//点击按钮2之后，先触发所有的内容不显示
.nav2:checked ~ .content > div {
  display: none;
}
//点击按钮2之后，再触发的按钮2对应的内容显示
.nav2:checked ~ .content > div:last-child {
  display: block;
}
//在默认初始化情况下，设置某个按钮颜色或者内容显示
.nav li.active {
  background: #ff7300;
  color: #fff;
}
.content .default {
  display: block;
}
</style>
<body>
<div class="box">
 <input class="nav1" type="radio" id="li1" name="nav">
 <input class="nav2" type="radio" id="li2" name="nav">
 <ul class="nav">
    <li class=active><label for="li1">tab1</label></li>
    <li><label for="li2">tab2</label></li>
 </ul>
 <div class="content">
    <div class="content1 default">tab1:这个tab1的内容</div>
    <div class="content2">tab2:这个tab2的内容</div>
 </div>
</div>
</body>
</html>

法二： <a>标签target的伪类实现tab的切换
知识点:
1、要使用 :target 伪元素，需要 HTML 锚点，以及锚点对应的 HTML 片段
2、核心是使用 :target 伪类接收点击事件
3、通过兄弟选择符"~ "控制样式

<style>
#content1,
#content2 {
  display: none;
  width: 100%;
  background: #fff;
}
#content1:target,
#content2:target {
  display: block;
}

#content1.active {
  display: block;
}

.active ~ .nav li:first-child {
  background: #ff7300;
  color: #fff;
}

#content1:target ~ .nav li {
  background: #ddd;
  color: #000;
}
#content1:target ~ .nav li:first-child {
  background: #ff7300;
  color: #fff;
}

#content2:target ~ .nav li {
  background: #ddd;
  color: #000;
}
#content2:target ~ .nav li:last-child {
  background: #ff7300;
  color: #fff;
}

</style>
<body>
<div class=container>
  <div class="content1" id="content1">tab1: 这是tab1的内容</div>
  <div class="content2" id="content2">tab2: 这是tab2的内容</div>
  <ul class="nav">
     <li class="active"><a href="#content1">tab1</a></li>
     <li><a href="#content2">tab2</a></li>
   </ul>
</div>
</body>

法三： focus-within 来实现tab功能切换

原理： :focus-within它表示一个元素获得焦点，或该元素的后代元素获得焦点。重点：它或它的后代获得焦点。
这也就意味着，它或它的后代获得焦点，都可以触发 :focus-within。

知识点
1、这个属性有点类似 Javascript 的事件冒泡，从可获焦元素开始一直冒泡到根元素 html，都可以接收触发:focus-within 事件
2、本例子的思路就是通过获焦态来控制其他选择器，以及最重要的是利用了父级的 :not(:focus-within)来设置默认样式.

<style>
button:focus-within {
  color: #fff;
  background: #ff7300;
}
.content-box {
  font-size: 24px;
  border: 1px solid #ddd;
  height: 100px;
}
.content-box div {
  display: none;
}
.nav-box:not(:focus-within) .nav1 {
  color: #fff;
  background: #ff7300;
}
.nav-box:not(:focus-within) .content1 {
  display: block;
}
.nav1:focus-within ~ .content-box .content1 {
  display: block;
}
.nav2:focus-within ~ .content-box .content2 {
  display: block;
}
</style>
<body>
<div class="container">
<div class="nav-box">
  <button class="nav1">tab1</button>
  <button class="nav2">tab2</button>
  <div class="conten-box">
    <div class=content1>content1</div>
    <div class=content2>content2</div>
  </div>
</div>
</div>
</body>

注意： 这个效果有个缺点就是：当tab失去焦点的时候就会回到tab1上面去。

Conan_W

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
HTML中总结实现tab切换的几种可行方法

BAT大家都不陌生，B:代表Baidu.com,A:代表Alibaba.com,T:代表Tencent.com,对于很多程序员来说，这就是梦想，但是对于小编来讲，适合自己的才是最重要的。
复制链接

扫一扫

专栏目录