前端*js经典案例*选项卡_用前端简单做一个选项卡-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaodingmao/article/details/118880555

这篇博客介绍了如何使用JavaScript配合HTML和CSS实现一个简单的选项卡切换效果。通过创建一个面向对象的JavaScript函数Tabs，实现了点击和鼠标滑过两种触发方式来切换内容。示例中包含两个选项卡实例，分别演示了点击和鼠标滑过的交互效果，为前端开发者提供了实用的代码参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选项卡作为前端开发必须项，下面简单做了个面向对象开发的选项卡：

html5 部分

    <!-- 第一个 -->
<div class="box" id="box1">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
    <!-- 第二个 -->
<div class="box" id="box2">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>

css部分

<style>
       /* 简单设置选项卡样式 */
        .box{
            width: 600px;
            height: 300px;
            border: 2px solid black;
            margin: 30px auto;
            display: flex;
            flex-direction: column;
        }
        /* 点击切换标签 */
        .box>ul{
            height: 50px;
            display: flex;
        }
        .box>ul>li{
            flex: 1;
            background-color: blue;
            color: white;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        /* 切换后的 */
        .box>ul>li.active{
            background-color: tomato;
        }
        /* 切换后的内容标签 */
        .box>ol{
            flex: 1;
            position: relative;
        }
        .box>ol>li{
            width: 100%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;
            background-color: yellow;
            color: pink;
            font-size: 100px;
            display: none;
        }
        .box>ol>li.active{
            display: flex;
        }
    </style>

js部分

// 获取元素，默认点击
function Tabs(select,type='click') {
       this.ele = document.querySelector(select)
        // 获取切换元素
       this.btns = this.ele.querySelectorAll('ul > li')
        // 获取内容元素
       this.boxs = this.ele.querySelectorAll('ol > li')
       this.type = type
       this.change()
   }、
// 方法部分
Tabs.prototype.change = function(){
 // 外部循环每一个切换元素
for (let i = 0; i < this.btns.length; i++) {
    // 监听btns元素的事件类型状态
   this.btns[i].addEventListener(this.type,()=>{
      // 内部循环每一个切换元素，为了改变btns 和 boxs 的选中状态
     for (let j = 0; j < this.btns.length; j++) {
            // 去掉 btns 和 boxs 类名样式
          this.btns[j].classList.remove('active')
          this.boxs[j].classList.remove('active')
         }
      // 添加 btns 和 boxs 类名样式
     this.btns[i].classList.add('active')
     this.boxs[i].classList.add('active')
   })
  }
}
// 调用
new Tabs('#box1')
// box2 设置鼠标滑过改变效果
new Tabs('#box2','mouseover')