JS实现的简单标签点击切换功能示例

首先来讲一下JS实现的简单标签点击切换功能示例的攻略。

1. 确定页面结构和元素

首先我们需要确定页面结构和需要被点击切换的标签元素。在示例中，我们可以使用HTML ul 和 li 标签来实现。

<ul class="tab">
  <li class="active">标签1</li>
  <li>标签2</li>
  <li>标签3</li>
</ul>

2. 使用CSS美化样式

接下来，我们可以使用CSS对标签样式进行美化，为标签添加样式的时候，可以使用:hover伪类来实现当鼠标在其上方时高亮显示的效果。

.tab {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab li {
  margin-right: 20px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 5px;
}

.tab li.active {
  background-color: #ccc;
}

3. 使用JS实现标签切换

最后一步，我们需要使用JS来实现标签的切换。我们可以通过addEventListener()方法，为每个标签元素添加click事件监听器，来实现标签的切换效果。在事件监听器中，我们可以为选中的标签添加active类，同时移除之前选中标签的active类，来实现选中标签切换。

以下是具体的代码示例，实现了点击标签进行切换的效果。

const tabs = document.querySelectorAll('.tab li')

tabs.forEach(tab => {
  tab.addEventListener('click', function() {
    const selectedTab = document.querySelector('.active')
    selectedTab.classList.remove('active')
    this.classList.add('active')
  })
})

示例1：在网页顶部实现标签点击切换

现在，我们就可以应用刚刚学到的内容，在一个具体的网站页面中，实现标签点击切换的效果。

比如，在网页的顶部导航栏中，我们可以添加一个标签，点击标签可以切换显示不同的页面内容。

<nav>
  <ul class="tabs">
    <li class="active">首页</li>
    <li>产品介绍</li>
    <li>关于我们</li>
  </ul>
</nav>

在CSS中，我们可以为标签样式添加一些动画效果，使之看起来更加美观。

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

.tabs li {
  cursor: pointer;
  margin-right: 20px;
  padding: 5px 10px;
  border-radius: 5px;
  transition: all 0.3s ease-in;
}

.tabs li.active {
  background-color: #ccc;
  transform: rotate(360deg);
}

最后，在JS代码中，我们可以使用switch语句来切换显示对应的页面内容。

const tabs = document.querySelectorAll('.tabs li')
const pages = document.querySelectorAll('.page')

tabs.forEach((tab, index) => {
  tab.addEventListener('click', function() {
    const selectedTab = document.querySelector('.tabs .active')
    selectedTab.classList.remove('active')
    this.classList.add('active')

    pages.forEach(page => {
      page.classList.remove('active')
    })

    switch (index) {
      case 0:
        document.querySelector('.page.home').classList.add('active')
        break
      case 1:
        document.querySelector('.page.products').classList.add('active')
        break
      case 2:
        document.querySelector('.page.about').classList.add('active')
        break
    }
  })
})

示例2：在产品列表页面实现标签点击切换

除了在网页的顶部导航栏中实现标签点击切换的功能，我们还可以在页面的其他位置使用标签进行切换。

比如，在产品列表页面中，我们可以添加一个标签，点击标签可以切换显示不同的产品类型的产品列表。

<div class="container">
  <ul class="tabs">
    <li class="active">全部</li>
    <li>数码产品</li>
    <li>家居用品</li>
  </ul>
  <ul class="product-list">
    <li>产品1</li>
    <li>产品2</li>
    <li>产品3</li>
    <li>产品4</li>
    <li>产品5</li>
  </ul>
</div>

在CSS中，我们可以为标签样式添加一些动画效果，以及对产品列表进行美化。

.container {
  margin: 20px auto;
}

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

.tabs li {
  cursor: pointer;
  margin-right: 20px;
  padding: 5px 10px;
  border-radius: 5px;
  transition: all 0.3s ease-in;
}

.tabs li.active {
  background-color: #ccc;
}

.product-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.product-list li {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

在JS代码中，我们需要使用一个数组来存储不同类型的产品数据，然后在标签点击时，根据标签类型来渲染对应类型的产品列表。

const tabs = document.querySelectorAll('.tabs li')
const productList = document.querySelector('.product-list')
const allProducts = [
  { name: '产品1', type: '数字产品' },
  { name: '产品2', type: '数字产品' },
  { name: '产品3', type: '家居用品' },
  { name: '产品4', type: '家居用品' },
  { name: '产品5', type: '家居用品' },
]

tabs.forEach((tab, index) => {
  tab.addEventListener('click', function() {
    const selectedTab = document.querySelector('.tabs .active')
    selectedTab.classList.remove('active')
    this.classList.add('active')

    const filteredProducts = index === 0 ? allProducts : allProducts.filter(product => product.type === this.textContent)
    renderProducts(filteredProducts)
  })
})

function renderProducts(products) {
  let html = ''
  products.forEach(product => {
    html += `<li>${product.name}</li>`
  })
  productList.innerHTML = html
}

通过以上的步骤，我们就可以在产品列表页面上，添加标签进行切换不同类型的产品列表。