JavaScript 用循环绑定事件制作tab栏切换，点赞加关注更多内容持续更新

十七同志

已于 2023-11-22 16:46:19 修改

阅读量247

点赞数 5

分类专栏： Javascript项目和经典案例专栏文章标签： javascript 开发语言算法前端 html css

于 2023-11-18 23:54:38 首次发布

本文链接：https://blog.csdn.net/weixin_54049256/article/details/134485720

版权

Javascript项目和经典案例专栏专栏收录该内容

7 篇文章 1 订阅

订阅专栏

分享一个用for循环，循环绑定事件事件来制作的tab栏切换模板，用事件委托制作当然也可以

先来看看效果：

思路：

其实这里面最重要的一个思想就是“排他思想”。意思就是将别人的样式都去除，然后再加上自己的样式，这样就可以实现点击相应的tab栏按钮，其它按钮的样式全部消失，加上自己的样式。

直接附上全部代码，全部拷贝到自己的编辑器里就可以运行，我这里只是提供一个模板一个实现思路，感兴趣的小伙伴可以拷贝到自己的电脑上，更改样式和内容，实现更丰富的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title></title>
</head>
<body>
     <style>
    /* 设置全局样式 */
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  
    /* 设置导航条样式 */
    ul {
      width: 500px;
      height: 50px;
      margin: 0px auto;
    }
  
    /* 设置内容容器样式 */
    ol{
      margin: 0px auto;
    }
  
    /* 设置每个导航tab的样式 */
    ul li {
      float: left;
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      cursor: pointer;
    }
  
    /* 设置导航tab hover时的样式 */
    ul li:hover {
      background-color: rgb(228, 228, 228);
    }
  
    /* 设置内容项容器的样式 */
    ol {
      width: 500px;
      height: 100px;
    }
  
    /* 设置每个内容项的样式 */
    ol li {
      display: none;
      width: 500px;
      height: 100px;
      background-color: rgb(238, 238, 238);
      box-shadow: -5px 5px 5px rgb(197, 197, 197);
      text-align: center;
      line-height: 100px;
    }
  
    /* 设置选中tab的样式 */
    .active1 {
      background-color: rgb(228, 228, 228)
    }
  
    /* 设置选中内容项的样式 */
    .active2 {
      display: block;
    }
  </style>
</head>
<body>
  <div>
    <!-- 导航条 -->
    <ul>
      <li class="active1">TAB 1</li>
      <li>TAB 2</li>
      <li>TAB 3</li>
      <li>TAB 4</li>
      <li>TAB 5</li>
    </ul>
    <!-- 内容容器 -->
    <ol>
      <li class="active2">内容一</li>
      <li>内容二</li>
      <li>内容三</li>
      <li>内容四</li>
      <li>内容五</li>
    </ol>
  </div>
  
  <script>
    // 获取导航项列表和内容项列表
    const navLi = document.querySelectorAll('ul li')
    let content = document.querySelectorAll('ol li')
  
    // 循环给每个导航项绑定点击事件
    for (let i = 0; i < navLi.length; i++) {
      navLi[i].addEventListener('click', function () {
        // 循环遍历所有导航项和内容项，移除当前选中状态
        for (let j = 0; j < navLi.length; j++) {
          navLi[j].classList.remove('active1')
          content[j].classList.remove('active2')
        }
        // 将当前点击的导航项和对应的内容项加上选中状态
        this.classList.add('active1')
        content[i].classList.add('active2')
      })
    } 
  </script>

  </script>
</body>
</html>