【JS】tab选项卡切换

最新推荐文章于 2023-08-10 18:55:59 发布

VIP文章炒米像啥

最新推荐文章于 2023-08-10 18:55:59 发布

阅读量311

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/chaomi_didi/article/details/109123961

版权

一、代码思路
1、用户可视步骤一：点击li后显示高亮背景。鼠标点击每一个li时需先排他，避免出现其他都显示成current样式。

代码主要步骤：
1）新建li点击后的样式 current；
2）for 循环对所有li注册点击事件;
3）for 循环排他；
4）当前点击li获得新样式：this.className = ‘current’;

2、用户可视步骤二：点击li后，显示当前点击li对应的item content。需排他，避免已被显示的content一直显示。

代码主要步骤：
1）对li元素设置自定义属性index，this.setAttribute(‘index’,i) ，i从0依次递增至length，写入批量注册点击事件的for循环中
2）获取当前点击li的index，index= this.getAttribute(‘index’)；
3) 排他，避免item已显示的内容一直显示；
4）修改对应li的item display属性，进行显示。

二、代码详情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        .tab {
    
            width: 1000px;
            margin: 200px auto;
        }
        .tab_list ul {
    
            height: 30px;<

最低0.47元/天解锁文章

炒米像啥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JS】tab选项卡切换

一、代码思路1、用户可视步骤一：点击li后显示高亮背景。鼠标点击每一个li时需先排他，避免出现其他都显示成current样式。代码主要步骤：1）新建li点击后的样式 current；2）for 循环对所有li注册点击事件;3）for 循环排他；4）当前点击li获得新样式：this.className = ‘current’;2、用户可视步骤二：点击li后，显示当前点击li对应的item content。需排他，避免已被显示的content一直显示。代码主要步骤：1）对li元素设置自定义属
复制链接

扫一扫