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

第二种方式（div）

div形式实现（div的display为none和block）

完整代码

<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="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>

*{
    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;
}

.content2{
    border: 1px solid rgb(8, 8, 8);
    width: 300px;
    height: 300px;
}

//隐藏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'];
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();       // 调用隐藏函数      
        content2.style.display = 'block';         // 设置当前点击的按钮所对应的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'];
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();       // 调用隐藏函数      
        content2.style.display = 'block';   // 设置当前点击的按钮所对应的content2显示
    })
}

先在前面定义一个清空5个content2块显示方式的函数（将他们都隐藏显示）

function Clear(){ // 通过循环、class类属性的查找方式获取到5个content2块 // 设置display为none也就是不显示 for(let i = 0;i<5;i++){ let content2_clear = document.getElementsByClassName("content2")[i]; content2_clear.style.display = 'none'; } }

先定义一个颜色对象：let color = ['red','green','yellow','white','pink'];

使用for循环进行操作：for(let i = 0;i<color.length;i++){....}。for循环次数根据颜色对象长度来

for循环里：

• 根据循环次数来查找li标签（5个），并赋值给btn。

• let btn = document.getElementsByTagName("li")[i];

• 根据循环次数来查找div标签（5个），并赋值给content2。

• let content2 = document.getElementsByClassName("content2")[i];

• 设置li标签的背景色（也可以在css中设置，这里为了方便在这设置了）

• btn.style.backgroundColor = color[i];
• 
  

• 然后就是给当前li标签添加点击事件（使用addEventListener方法）

• btn.addEventListener('click',function(){...}
• 点击事件里：

• 先调用一次清空函数，将5个块都隐藏

• Clear();

• 设置对应的块显示（display设置为block）

• content2.style.display = 'block';

自此，点击指定区域后所对应的块显示的，其他块隐藏的效果就实现了（其实应该在定义完清空函数的时候先调用一次清空函数的，这样子就不会将5个content2块给显示给用户看了）