显示和隐藏 div 根据单击相应按钮的顺序更改位置

Question

如果有人可以提供帮助，我将不胜感激（我对代码相当陌生，所以请原谅语法）。

但是我正在寻找的是两个按钮（按钮A和按钮B）来隐藏和显示其相应的div（div A和div B），它们单独操作。 div 将占据屏幕宽度的 50%，并且根据单击的顺序将确定它们的位置。第一次单击（无论按钮 A 还是按钮 B）将出现在屏幕右侧 50% 宽度，第二次单击（无论按钮 A 还是按钮 B）将出现在屏幕左侧 50% 宽度。

我能够创建一个显示和隐藏 div，但不知道如何根据单击相应按钮的顺序来确定它们的位置...

Answer 1

<!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">
    <title>Document</title>
    <style>
        .columns{
            width:50%;
            height:100%;
        }
        body , html{
            height:100%;
        }
        span{
            margin-top:50%; margin-bottom:50%;
        }
        .columns div{
            position:relative;
            top:50%;
            color:white;
        }
    </style>
</head>
<body>
    <button class="buttons" data-id="buttonA">Button A</button>
    <button class="buttons" data-id="buttonB">Button B</button>

<div style="height:50%; display:flex;">
    <div class="columns" data-id="buttonA" style="background-color:green; text-align:center; position:relative; display:none;">
<div>div a</div>
    </div>
    <div class="columns" data-id="buttonB" style="background-color:red; text-align:center; position:relative; display:none;">
<div>div b</div>
    </div>
</div>
<script>
    let buttons=document.querySelectorAll('.buttons')
    for (let i = 0; i < buttons.length; i++) {
        
    
    buttons[i].addEventListener('click',function (params) {

        let button = params.target.getAttribute('data-id');
        let divs = document.querySelectorAll('.columns');
        for (let index = 0; index < divs.length; index++) {
            
            if (button==divs[index].getAttribute('data-id')){
                divs[index].style.display="Block"
                divs[index].after(divs[divs.length-1])
                if (divs[index].classList.contains('show')){
                divs[index].classList.remove('class','show');
                divs[index].style.display = "none"
                }
                else{
                divs[index].classList.add('show')
                divs[index].style.display="Block"
                }
            }else {
                divs[index].before(divs[divs.length-1])
            }
            
            
        }
    })
}
</script>
</body>
</html>

这是我的解决方案。

显示和隐藏 div 根据单击相应按钮的顺序更改位置

问题描述投票：0回答：1

1个回答

最新问题

显示和隐藏 div 根据单击相应按钮的顺序更改位置

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1