Замена div по нажатию на button

215

31 мая 2018, 11:00

Всем привет ) Я написал скрипт чтоб при нажатии на "Кнопку 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>

Answer 1

Сперва задайте одному из 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как можно сделать такой вот способ оплаты?

181

javascript

Изменение интервалов opacity в javascript

Всем привет!

175

javascript

Как добавить в таблицу jscrollpane

Кто знает в чем проблема? Хочу сочетать таблицу и jscrollpane, когда начинаю использовать этот плагин все ломает, не получается зафиксировать theadКто...

182

javascript

Появление фото справа при hover эффекте

Может кто-то знает где взять заготовку примерно как на фото, такую карточку, слева изначальный вариант а справа при наведении, чтобы фото...

176