Question

我实际上并不是程序员，但我必须正确地使用此网站。为此，我需要你的帮助。

我正在搞乱一些javascript而且我设法捣乱了：

<script>

    function funcaosabores1() {
        document.getElementById("testeagora1").innerHTML = "";
        document.getElementById('contento1').style.visibility="visible";
        document.getElementById('contento2').style.visibility="hidden";
        document.getElementById('contento3').style.visibility="hidden";
        document.getElementById('contento4').style.visibility="hidden";
        document.getElementById('contento5').style.visibility="hidden";
}

    function funcaosabores2() {
        document.getElementById("testeagora2").innerHTML = "";
        document.getElementById('contento2').style.visibility="visible";
        document.getElementById('contento1').style.visibility="hidden";
        document.getElementById('contento3').style.visibility="hidden";
        document.getElementById('contento4').style.visibility="hidden";
        document.getElementById('contento5').style.visibility="hidden";
}

    function funcaosabores3() {
        document.getElementById("testeagora3").innerHTML = "";
        document.getElementById('contento3').style.visibility="visible";
        document.getElementById('contento1').style.visibility="hidden";
        document.getElementById('contento2').style.visibility="hidden";
        document.getElementById('contento4').style.visibility="hidden";
        document.getElementById('contento5').style.visibility="hidden";
}

    function funcaosabores4() {
        document.getElementById("testeagora4").innerHTML = "";
        document.getElementById('contento4').style.visibility="visible";
        document.getElementById('contento1').style.visibility="hidden";
        document.getElementById('contento2').style.visibility="hidden";
        document.getElementById('contento3').style.visibility="hidden";
        document.getElementById('contento5').style.visibility="hidden";
}

    function funcaosabores5() {

        document.getElementById("testeagora5").innerHTML = "";
        document.getElementById('contento5').style.visibility="visible";
        document.getElementById('contento1').style.visibility="hidden";
        document.getElementById('contento2').style.visibility="hidden";
        document.getElementById('contento3').style.visibility="hidden";
        document.getElementById('contento4').style.visibility="hidden";
}
</script>

我找不到如何制作例如：funcaosabores1被点击并且现在可见，当我点击funcaosabores2时，第一个被隐藏而第二个被显示。但我无法点击第一个，因为它已被点击。（如果被称为返回，则为Idk）

这是脚本中调用的div：

    <div class="animacao_saborgingerale" id="contento2" style="visibility:hidden;"></div>
<div class="animacao_saboruvasyrah" id="contento3" style="visibility:hidden;"></div>
<div class="animacao_sabortangerina" id="contento4" style="visibility:hidden;"></div>
<div class="animacao_saboruvabranca" id="contento5" style="visibility:hidden;"></div>


    <div class="sabor-melancia"><p onclick="funcaosabores1()" id="testeagora1">MELANCIA</p> </div>
<div class="sabor-gingerale"><p onclick="funcaosabores2()" id="testeagora2">GINGER ALE</p></div>
<div class="sabor-uvasyrah"><p onclick="funcaosabores3()" id="testeagora3">UVA SYRAH</p></div>
<div class="sabor-tangerina"><p onclick="funcaosabores4()" id="testeagora4">TANGERINA</p></div>
<div class="sabor-uvabranca"><p onclick="funcaosabores5()" id="testeagora5">UVA BRANCA</p></div>

这看起来很乱，但如果你们能帮助我，我就在这里！感谢。

CodePen现在的情况。 @nielsdebruin

Answer 1

我想你只想做这样的事情：

let prevButton;
let prevContent;
function toggle(e) {
    if (prevButton) prevButton.style.visibility = 'visible';
    prevButton = e.target;
    e.target.style.visibility = 'hidden';
    let id = e.target.id;
    let number = id.slice(-1);
    if (prevContent) prevContent.style.visibility = 'hidden';
    prevContent = document.getElementById('contento' + number);
    prevContent.style.visibility = 'visible';
}

<div class="content animacao_saborgingerale" id="contento1" style="visibility:hidden;">1</div>
<div class="content animacao_saborgingerale" id="contento2" style="visibility:hidden;">2</div>
<div class="content animacao_saboruvasyrah" id="contento3" style="visibility:hidden;">3</div>
<div class="content animacao_sabortangerina" id="contento4" style="visibility:hidden;">4</div>
<div class="content animacao_saboruvabranca" id="contento5" style="visibility:hidden;">5</div>


<div class="button sabor-melancia"><p onclick="toggle(event)" id="testeagora1">MELANCIA</p> </div>
<div class="button sabor-gingerale"><p onclick="toggle(event)" id="testeagora2">GINGER ALE</p></div>
<div class="button sabor-uvasyrah"><p onclick="toggle(event)" id="testeagora3">UVA SYRAH</p></div>
<div class="button sabor-tangerina"><p onclick="toggle(event)" id="testeagora4">TANGERINA</p></div>
<div class="button sabor-uvabranca"><p onclick="toggle(event)" id="testeagora5">UVA BRANCA</p></div>

Javascript函数回到原来的位置

1 个答案: