2

Всем привет ) Я написал скрипт чтоб при нажатии на "Кнопку 1" открывался первый "див" (а второй не показывался причем даже при обновлении страницы ) , а при нажатии на "Кнопку 2" показывался второй "див" ,а первый скрывался и тоже не был виден при обновлении страницы . Но вот почему-то при обновлении они накладываются один на другой ((Помогите пожалуйста .

pum2 -Кнопка-1 pum3 -Кнопка-2 "#svg8 ,.text1,.text2,.text3,.barra-progresso" -ВСЕ ГРАФИЧЕСКИЕ ФАЙЛЫ В svg формате .

вот код JS

<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 ответ 1

3

Сперва задайте одному из div_ов свойство hide(); а затем манипулируйте ими (в данном случае hide нужно задать первому блоку). Если вам нужно запомнить состояние элемента после обновления на js - можете использовать localStorage.

Ссылка с решением проблемы ниже.

     $(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>

2
  • Попробую на своем проекте проверить , при обновлении оно ж не накладывается одно на другое ?
    – Karter
    22 мая 2018 в 5:33
  • 2
    Нет, не будет. Всё работает стабильно. Ваш код работал не так, поскольку вы заранее не задали одному из элементов hide(); Таким образом они оба показывались.
    – BaseScript
    22 мая 2018 в 18:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.