手撕波波哥JS作业2-点击事件实现某块内容显示(两种方式)三

精选原创

两种方式合并

ul-li 和 div同时

实际上就是说：点击指定区域的时候，同时进行修改content的背景色、显示指定的div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    
    <div>
        <ul id="li_btn_main">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
        </ul>
    </div>
    <div class="content"></div>

    <div class="content2" style="background-color: rgb(24, 133, 228);"></div>
    <div class="content2" style="background-color: rgb(26, 199, 69);"></div>
    <div class="content2" style="background-color: rgb(121, 28, 145);"></div>
    <div class="content2" style="background-color: rgb(190, 30, 65);"></div>
    <div class="content2" style="background-color: rgb(199, 201, 202);"></div>

    <script src="index.js"></script>
</body>
</html>

*{
    padding: 0;
    margin: 0px auto;
}

#li_btn_main{
    border: 1px solid red ;
    background-color: aqua;
    width: 800px;
    height: 100px;

    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#li_btn_main li{
    border: 1px dashed green;
    background-color: rgb(149, 149, 151);
    width: 100px;
    height: 50px;

    list-style: none;
    text-align: center;
}

.content{
    margin:  0 auto;
    width: 500px;
    height: 300px;
    border: 1px dashed blue;
}
.content2{
    border: 1px solid rgb(8, 8, 8);
    width: 300px;
    height: 300px;
}

// step3：同时更改content和content2的背景颜色
//隐藏5个content2，将display设置为none
function Clear(){
    for(let i = 0;i<5;i++){
        let content2_clear = document.getElementsByClassName("content2")[i];
        content2_clear.style.display = 'none';
    }
}

// 方法二：使用5个div来达到点击相应按钮来切换的效果
let color = ['red','green','yellow','white','pink'];
const content = document.getElementsByClassName("content")[0];
for(let i = 0;i<color.length;i++){
    let btn = document.getElementsByTagName("li")[i];
    let content2 = document.getElementsByClassName("content2")[i];
    btn.style.backgroundColor = color[i];
    btn.addEventListener('click',function(){
        Clear();       // 调用隐藏函数      
        content.style.backgroundColor = color[i]; // 设置背景颜色
        content2.style.display = 'block';         // 设置当前点击的按钮所对应的content2显示
    })
}

实现效果图和注解

手撕波波哥JS作业2-点击事件实现某块内容显示(两种方式)三_JavaScript

代码就不解析了，看完上面的其实这个也懂了，就是直接糅合在了一起操作而已。

课堂笔记截图

手撕波波哥JS作业2-点击事件实现某块内容显示(两种方式)三_JavaScript_03

自己课堂前写的

table-tr-td形式实现（button的点击事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按钮控制区域显示</title>
    <style>
        *{margin: 0 auto;padding: 0;background-color: rgb(201, 181, 154);text-align: center;}
        .btn_main{border: 1px solid rgb(11, 41, 236);}
        .center{width: 300px;height: 300px;background-color: white;}
        button{width: 40px;height: 30px;}
        a{color: inherit;text-decoration: none;}        
    </style>
</head>
<body>
    
    <div class="btn_main">
        <table>
            <tr>
                <td>
                    <button><a href="#">1</a></button>
                </td>
                <td>
                    <button><a href="#">2</a></button>
                </td>
                <td>
                    <button><a href="#">3</a></button>
                </td>
                <td>
                    <button><a href="#">4</a></button>
                </td>
                <td>
                    <button><a href="#">5</a></button>
                </td>
            </tr>
        </table>
    </div>
    <div class="center">
    </div>
    <div style="border: 1px solid red;height: 21px;">
        <p class="center_p" style="text-align: center;"></p>
    </div>
    <div class="log_ten_text">
        <p>
            倒计时<br>
            <span class="log_span"></span><br>
            计时结束后确认将前往百度首页</p>
    </div>

    <script>
        // step1 - 点击相应的按钮修改center块背景颜色
        let color = ['pink','red','green','yellow','white']
        let text_center = ['点击按钮1','点击按钮2','点击按钮3','点击按钮4','点击按钮5'] // 点击按钮之后会在该区域显示点击了那个按钮
        let center = document.getElementsByClassName('center')[0]; // 根据类名属性查找获取到要修改背景色的块
        for(let i = 0;i<5;i++){  // 这里的长度其实还可以设置为颜色对象的长度：color.length
            let btn = document.querySelectorAll('.btn_main button')[i];
            btn.style.backgroundColor = color[i];
            btn.addEventListener('click',function(){                
                center.style.backgroundColor = color[i];
                let conter_p = document.getElementsByClassName("center_p")[0];
                conter_p.innerText = text_center[i];
                
                // 控制台输出（背景颜色、修改的文本内容）
                console.log(center.style.backgroundColor);
                console.log(conter_p.innerText);
            })
            console.log(btn);        
        }
    </script>

</body>
</html>

实现效果图和注解

手撕波波哥JS作业2-点击事件实现某块内容显示(两种方式)三_ul-li && div_06

这里上面五个按钮（使用表格方式来写），按下对应的按钮会改变下面块的背景色，同时在下面的文本信息也会改变显示为点击该按钮。

// step1 - 点击相应的按钮修改center块背景颜色
let color = ['pink','red','green','yellow','white']
let text_center = ['点击按钮1','点击按钮2','点击按钮3','点击按钮4','点击按钮5'] // 点击按钮之后会在该区域显示点击了那个按钮
let center = document.getElementsByClassName('center')[0]; // 根据类名属性查找获取到要修改背景色的块
for(let i = 0;i<5;i++){  // 这里的长度其实还可以设置为颜色对象的长度：color.length
    let btn = document.querySelectorAll('.btn_main button')[i];
    btn.style.backgroundColor = color[i];
    btn.addEventListener('click',function(){                
        center.style.backgroundColor = color[i];
        let conter_p = document.getElementsByClassName("center_p")[0];
        conter_p.innerText = text_center[i];

        // 控制台输出（背景颜色、修改的文本内容）
        console.log(center.style.backgroundColor);
        console.log(conter_p.innerText);
    })
    console.log(btn);        
}

定义一个颜色对象：let color = ['pink','red','green','yellow','white'];
定义一个文本信息对象(点击对应按钮的信息)：
let text_center = ['点击按钮1','点击按钮2','点击按钮3','点击按钮4','点击按钮5']
根据类名属性查找获取到要修改背景色的块：
let center = document.getElementsByClassName('center')[0];
使用for循环进行操作：for(let i = 0;i<5;i++){....}。for循环次数根据颜色对象长度来
for循环里：
根据循环次数来查找button标签（5个），并赋值给btn。
let btn = document.getElementsByTagName("li")[i];
修改btn的背景色。
btn.style.backgroundColor = color[i];
给每个btn添加点击事件
点击事件里：
修改背景色块
center.style.backgroundColor = color[i];
根据类名属性获取到要显示按下了那个对应的按钮的文本元素
let conter_p = document.getElementsByClassName("center_p")[0];
修改文本元素的文本为文本对象中对应的值
conter_p.innerText = text_center[i];

手撕波波哥JS作业2-点击事件实现某块内容显示(两种方式)三

手撕波波哥JS作业2-点击事件实现某块内容显示(两种方式)三

两种方式合并

ul-li 和 div同时

实现效果图和注解

课堂笔记截图

自己课堂前写的

table-tr-td形式实现（button的点击事件）

实现效果图和注解

Recommend

火山引擎获全国人工智能大赛 — AI+视频质量评价冠军

mongo如何使用脚本更新数据

vivo 容器平台资源运营实践 - vivo互联网技术

从“出海打工人”到“品牌打造者”——消费产业出海路在何方

PWA：浏览器的新范式

k8s~ingress_service_endpoint_pod四壮士 - 张占岭

Java多线程：ThreadPoolExecutor详解

服务器数据恢复-断电导致linux操作系统数据丢失的数据恢复案例

【2023CANN训练营第二季】——Ascend C代码实操分享

一键脚本快速安装容器版GrayLog

About Joyk