首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript函数返回到原来的位置

Javascript函数返回到原来的位置
EN

Stack Overflow用户
提问于 2018-04-06 03:24:26
回答 1查看 52关注 0票数 0

我实际上不是一个程序员,但我必须做好这个网站的工作。为此我需要你的帮助。

我正在处理一些javascript,我设法做到了这一点:

代码语言: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>

例如,我不知道如何制作:当我单击funcaosabores2时,funcaosabores1被单击并显示,第一个是隐藏的,第二个是显示的。但我不能再点击第一个,因为它已经被点击了。(如果它被称为return,则为Idk)

这是脚本中调用的div:

代码语言:javascript
复制
    <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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-06 03:40:16

我认为你只是想做这样的事情:

代码语言:javascript
复制
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';
}
代码语言:javascript
复制
<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>

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49680034

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档