CSS标签切换代码实例教程 比较漂亮

ChromeJS网站专栏上的“CSS标签切换代码实例教程 比较漂亮”是一篇介绍如何实现CSS标签切换效果的教程，该文主要从以下几个方面进行讲解：

1. 目录结构

首先，该文介绍了整个教程所需要的文件结构以及所用到的文件，其中主要包括index.html、index.css和index.js三个文件和一个img文件夹。

2. 实现思路

其次，该文详细介绍了如何实现CSS标签切换效果的实现思路。主要思路是通过JS控制HTML中标签的class属性，从而实现标签样式的切换。具体来说，文章介绍了如何使用JS监听页面加载完毕事件，然后通过获取相应的DOM元素、添加和删除类名等方式来实现标签切换。

3. 代码实现

最后，该文提供了两个完整的代码实例。第一个实例是基础版，通过改变标签的class实现了标签切换效果。第二个实例是升级版，引入了动画效果和鼠标事件监听，让标签切换更加生动有趣。

下面分别通过代码块的形式来展示这两个实例，具体代码实现详见以下示例：

基础版代码实现

<!-- index.html -->
<div class="container">
  <div class="header">
    <ul class="tabs">
      <li class="active"><a href="#" data-target="#tab1">Tab 1</a></li>
      <li><a href="#" data-target="#tab2">Tab 2</a></li>
      <li><a href="#" data-target="#tab3">Tab 3</a></li>
    </ul>
  </div>
  <div class="content">
    <div id="tab1" class="active">This is tab 1</div>
    <div id="tab2">This is tab 2</div>
    <div id="tab3">This is tab 3</div>
  </div>
</div>

<!-- index.css -->
.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #f5f5f5;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}

.header {
  display: flex;
  justify-content: center;
}

.tabs {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabs li {
  margin-right: 10px;
}

.tabs li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  background-color: #ddd;
  color: #333;
}

.tabs li.active a {
  background-color: #3388dd;
  color: #fff;
}

.content div {
  display: none;
}

.content div.active {
  display: block;
}

<!-- index.js -->
let tabs = document.querySelectorAll('.tabs li a');

for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', (e) => {
    e.preventDefault();
    let target = e.target.getAttribute('data-target');
    let tab = document.querySelector(target);
    let activeTab = document.querySelector('.content .active');
    activeTab.classList.remove('active');
    tab.classList.add('active');
    let activeLink = document.querySelector('.tabs .active');
    activeLink.classList.remove('active');
    e.target.parentElement.classList.add('active');
  })
}

升级版代码实现

<!-- index.html -->
<div class="container">
  <div class="header">
    <ul class="tabs">
      <li class="active"><a href="#" data-target="#tab1">Tab 1</a></li>
      <li><a href="#" data-target="#tab2">Tab 2</a></li>
      <li><a href="#" data-target="#tab3">Tab 3</a></li>
    </ul>
  </div>
  <div class="content">
    <div id="tab1" class="active"><img src="./img/image1.jpg"></div>
    <div id="tab2"><img src="./img/image2.jpg"></div>
    <div id="tab3"><img src="./img/image3.jpg"></div>
  </div>
</div>

<!-- index.css -->
.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #f5f5f5;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}

.header {
  display: flex;
  justify-content: center;
}

.tabs {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabs li {
  margin-right: 10px;
}

.tabs li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  background-color: #ddd;
  color: #333;
}

.tabs li.active a {
  background-color: #3388dd;
  color: #fff;
}

.content div {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.content div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms ease;
}

.content div.active img {
  opacity: 1;
}

<!-- index.js -->
let tabs = document.querySelectorAll('.tabs li a');

for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', (e) => {
    e.preventDefault();
    let target = e.target.getAttribute('data-target');
    let tab = document.querySelector(target);
    let activeTab = document.querySelector('.content .active');
    activeTab.classList.remove('active');
    tab.classList.add('active');
    let activeLink = document.querySelector('.tabs .active');
    activeLink.classList.remove('active');
    e.target.parentElement.classList.add('active');
  })
}

let content = document.querySelector('.content');

content.addEventListener('mouseenter', () => {
  content.classList.add('hover');
})

content.addEventListener('mouseleave', () => {
  content.classList.remove('hover');
})

以上就是这篇“CSS标签切换代码实例教程 比较漂亮”的完整攻略。