Hello everyone) I wrote a script so that when you clicked on "Button 1", the first "div" opened (and the second did not appear even when the page was updated), and when you clicked on "Button 2", the second "div" appeared, and the first one was hidden was not visible when refreshing the page. But for some reason, when updating, they are superimposed one on another ((Help please.

pum2 -Button-1 pum3 -button-2 "# svg8, .text1, .text2, .text3, .barra-progresso" -ALL GRAPHIC FILES In svg format.

here is the js code

<script type="text/javascript"> $(document).ready(function () { $(".pum2").click(function () { $("#svg8 ,.text1,.text2,.text3,.barra-progresso").hide() $("#topic").show() }); $(".pum3").click(function () { $("#topic").hide() $("#svg8,.text1,.text2,.text3,.barra-progresso").show() }); }); </script>

    1 answer 1

    First, set the hide () property to one of the div_s; and then manipulate them (in this case, hide must be set to the first block). If you need to remember the state of the item after updating to js, ​​you can use localStorage.

    The link to solve the problem below.

      $(document).ready(function () { $(".second_div").hide(); $(".btn1").click(function () { $(".first_div").hide(); $(".second_div").show() }); $(".btn2").click(function () { $(".second_div").hide(); $(".first_div").show() }); }); 
      .first_div { background: black; color: white } .second_div { color: black; background: lightgrey; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="first_div">Text of first div</div> <div class="second_div">Text of second div</div> <button class="btn1">Hide first</button> <button class="btn2">Hide second</button> </div>

    • I will try to check on my project, when updating it does not overlap one another? - Karter
    • 2
      No, it will not. Everything works stably. Your code did not work as you did not set one of the hide () elements in advance; So they both showed up. - Curious