1. дома
  2. Вопрос и ответ
  3. Как скрыть один div и показать другой div с помощью кнопки onclick?

Как скрыть один div и показать другой div с помощью кнопки onclick?

2014-09-22 2 views
2

У меня есть два div в моем html-файле. Я хочу скрыть первый div и показать еще один div на кнопке ввода html onclick.Как скрыть один div и показать другой div с помощью кнопки onclick?

Вот мой код,

function switchVisible() { 
 
    if (document.getElementById('Div1') !== undefined) { 
 
    if (document.getElementById('Div1').style.display == 'Block') { 
 
     document.getElementById('Div1').style.display = 'none'; 
 
     document.getElementById('Div2').style.display = 'Block'; 
 
    } else { 
 
     document.getElementById('Div1').style.display = 'Block'; 
 
     document.getElementById('Div2').style.display = 'none'; 
 
    } 
 
    } 
 
}
#Div2 { 
 
    display: none; 
 
}
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />

Но это не работает. Любая помощь будет оценена.

Спасибо.

источник

2014-09-22 Arpita

+3

пара вещей, изменить "Block" на "блок" и убедитесь, что ваши идентификаторы DIV верны, они чувствительны к регистру – MarshallOfSound

+1

Кроме того, удалите * javascript: * из onclick – fstanis

+0

Поскольку вы добавили тег jQuery в свой пост, почему бы не использовать '$ ('# Div1'). hide(); $ ('# Div2'). Show(); 'и наоборот – joym8

ответ

9

1) Внутри onclick вам не нужно использовать «javascript:», что подразумевается.

2) Вы проверяете на «дисплей: блок», я всегда проверять «дисплей: нет» (Потому что дисплей также может быть «встроенный блок» и т.д.)

Попробуйте это: 

function switchVisible() { 
 
      if (document.getElementById('Div1')) { 
 

 
       if (document.getElementById('Div1').style.display == 'none') { 
 
        document.getElementById('Div1').style.display = 'block'; 
 
        document.getElementById('Div2').style.display = 'none'; 
 
       } 
 
       else { 
 
        document.getElementById('Div1').style.display = 'none'; 
 
        document.getElementById('Div2').style.display = 'block'; 
 
       } 
 
      } 
 
}
#Div2 { 
 
    display: none; 
 
}
<div id="Div1">Div 1</div> 
 
<div id="Div2">Div 2</div> 
 

 
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>

источник

2014-09-22 19:07:15 Philip

+0

Как добавить переход при переключении divs? –

+0

Вместо того чтобы JS меняет «style.display», вы можете заставить его изменить/переключить/переключить какое-то имя класса. В вашем CSS вы можете добавить к ним переход. Кроме того, вы можете использовать функцию aimate() jQuery для этого. Посмотрите их документацию. – Philip

1

Попробуйте это:

var div1 = document.getElementById('Div1'), 
 
    div2 = document.getElementById('Div2'); 
 
function switchVisible() { 
 
    if(!div1) return; 
 
    if (getComputedStyle(div1).display == 'block') { 
 
    div1.style.display = 'none'; 
 
    div2.style.display = 'block'; 
 
    } else { 
 
    div1.style.display = 'block'; 
 
    div2.style.display = 'none'; 
 
    } 
 
} 
 
document.getElementById('Button1').addEventListener('click', switchVisible);
#Div2 { 
 
    display:none; 
 
}
<div id="Div1">Div 1</div> 
 
<div id="Div2">Div 2</div> 
 
<input id="Button1" type="button" value="Click me" />

Однако, этот подход может быть лучше: 

var wrapper = document.getElementById('wrapper'); 
 
function switchVisible() { 
 
    wrapper.classList.toggle('switched'); 
 
} 
 
document.getElementById('Button1').addEventListener('click', switchVisible);
#wrapper > :last-child { 
 
    display: none; 
 
} 
 
#wrapper.switched > :last-child { 
 
    display: block; 
 
} 
 
#wrapper.switched > :first-child { 
 
    display: none; 
 
}
<div id="wrapper"> 
 
    <div>Div 1</div> 
 
    <div>Div 2</div> 
 
</div> 
 
<input id="Button1" type="button" value="Click me" />

источник

2014-09-22 18:59:58 Oriol

+0

@ AndyKillen Детский комбинатор быстрее, чем потомок. Поэтому я не буду удалять его, просто чтобы сохранить байт. – Oriol

+0

Пожалуйста, дайте мне ссылку на то, где она описывает это быстрее. В этом контексте это не логично. –

+0

@AndyKillen '# wrapper.switched: first-child' сначала получает все элементы': first-child', а затем для каждого из них проверяется, существует ли '# wrapper.switched' предка. '# wrapper.switched>: first-child' проверяет только родителя. И, конечно, быстрее проверять только родителя, чем проверять всех предков. – Oriol

2

Как помечается JQuery, вот простой Ответ jQuery

$('body').on("click touchstart", "#Button1", function(e){ 
    $("#Div1, #Div2").toggle(); 
});

использование на прослушивание ид #Button, я использовал как щелчок и touchstart, чтобы сделать его мобильным дружеским, а затем используется тумблер(), который устанавливает состояние дисплея: в противоположность тому, что сейчас. Так что если это отображение: none, это будет отображение: блок, если он был отображен: блок будет отображаться: none

источник

2014-09-22 19:04:22

+0

Он помечен jQuery, однако пользователь явно использует чистый JS. –

+0

Кажется, не было никакого смысла отвечать на тот же результат, что и другие, используя чистую JS, когда это уже было сделано. Не для дублирования усилий. Я просто посмотрел, что просил OP (важный в этом уравнении). реалистично, (s) у него была только орфографическая ошибка, написание «Блока», а не «блок». Прошу прощения за то, что вы чувствуете себя жертвой квалифицированного ответа на заданный вопрос. –

+0

Я на самом деле больше для вашего ответа. Я просто заявлял, что да, он отметил его как jQuery, когда этого не должно быть. Я подниму вас, чтобы показать, что я искренен. :) –

0

Возможно, у вас есть синтаксические ошибки в коде. Это один работает:

function switchVisible() { 
 
    if (document.getElementById('Div1') !== undefined) { 
 

 
     if (document.getElementById('Div1').style.display == 'block') { 
 
      document.getElementById('Div1').style.display = 'none'; 
 
      document.getElementById('Div2').style.display = 'block'; 
 
     } else { 
 
      document.getElementById('Div1').style.display = 'block'; 
 
      document.getElementById('Div2').style.display = 'none'; 
 
     } 
 
    } 
 
}
#Div1 { 
 
    display:none; 
 
} 
 
#Div1 { 
 
    background: red; 
 
} 
 
#Div2 { 
 
    background: green; 
 
} 
 
#Div1, #Div2 { 
 
    width: 50px; 
 
    height:50px; 
 
}
<div id="Div1"></div> 
 
<div id="Div2"></div> 
 
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />

источник

2014-09-22 19:07:42

0

Не добавлять событие щелчка через HTML. Добавить прослушиватель событий, как document.getElementById ("Button1").addEventListener ("click", switchVisible, false);

Смотреть работать jsFiddle здесь: http://jsfiddle.net/bevanr01/gmkconLw/

источник

2014-09-22 19:11:26

1

вы могли бы хотите попробовать это ..

function switchVisible() { 
 
    \t var div1=document.getElementById('Div1'); 
 
    \t var div2=document.getElementById('Div2'); 
 
    \t 
 
     if (div1 !== undefined && div2 !== undefined) { 
 
    \t div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block'; 
 
    \t div2.style.display = div1.style.display === 'block' ? 'none' : 'block'; 
 
     } 
 
    }
#Div1{ 
 
display: block; 
 
background: blue; 
 
} 
 

 
#Div2 { 
 
    display: none; 
 
    background: red; 
 
} 
 

 
.divs 
 
{ 
 
width: 50px; 
 
height: 50px; 
 
border: 1px solid #000; 
 
}
<input id="Button1" type="button" value="Hide" onclick="switchVisible();" /> 
 

 
<div id="Div1" class="divs"> </div> 
 
<div id="Div2" class="divs"> </div>

источник

2014-09-22 20:54:08 Wracker

-2 

function switchVisible() { 
 
    \t var div1=document.getElementById('Div1'); 
 
    \t var div2=document.getElementById('Div2'); 
 
    \t 
 
     if (div1 !== undefined && div2 !== undefined) { 
 
    \t div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block'; 
 
    \t div2.style.display = div1.style.display === 'block' ? 'none' : 'block'; 
 
     } 
 
    }
#Div1{ 
 
display: block; 
 
background: blue; 
 
} 
 

 
#Div2 { 
 
    display: none; 
 
    background: red; 
 
} 
 

 
.divs 
 
{ 
 
width: 50px; 
 
height: 50px; 
 
border: 1px solid #000; 
 
}
<input id="Button1" type="button" value="Hide" onclick="switchVisible();" /> 
 

 
<div id="Div1" class="divs"> </div> 
 
<div id="Div2" class="divs"> </div>

function switchVisible() { 
 
    \t var div1=document.getElementById('Div1'); 
 
    \t var div2=document.getElementById('Div2'); 
 
    \t 
 
     if (div1 !== undefined && div2 !== undefined) { 
 
    \t div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block'; 
 
    \t div2.style.display = div1.style.display === 'block' ? 'none' : 'block'; 
 
     } 
 
    }
#Div1{ 
 
display: block; 
 
background: blue; 
 
} 
 

 
#Div2 { 
 
    display: none; 
 
    background: red; 
 
} 
 

 
.divs 
 
{ 
 
width: 50px; 
 
height: 50px; 
 
border: 1px solid #000; 
 
}
<input id="Button1" type="button" value="Hide" onclick="switchVisible();" /> 
 

 
<div id="Div1" class="divs"> </div> 
 
<div id="Div2" class="divs"> </div>

источник

2017-05-12 09:19:14

+1

Вы должны указать объяснение своего кода в ответе. – Luke

+0

Вам нужно объяснение ??? –

+0

Я не другие, кто пришел сюда, чтобы узнать из ответа. – Luke

Смежные вопросы

 Смежные вопросы