Как скрыть или показать DIV по щелчку в HTML

У меня есть четыре HTML div Я хочу, чтобы показать и скрыть их по щелчку, как это сделатьКак скрыть или показать DIV по щелчку в HTML

  <div id="targetid" class="image_one"><img src="image/imageone.png"/></div> 
      <div id ="targetidone "class="image_two"><img src="image/imagetwo.png"/></div> 
      <div id="targetidtwo" class="image_one_one"><img src="image/pagetwo_graph_two_11.png"/></div> 
      <div id ="targetidfour"class="image_two_two"><img src="image/pagetwo_graph_two_22.png"/></div>

ниже, являются два div, на которых после нажмите на изображении выше должны скрывать и показывать

  <div class="option_image"><img src="image/option_1.png"/></div> 

      <div class="option_image_one"><img src="image/option_1.png"/></div>

источник

2012-04-19 Jackson J

Это называется «div» –

@UmerHayat Я так думаю, если вы знаете другого, скажите –

Если вы искали google, вы могли бы найти около 1 mil. примеры того, как это сделать. Я проголосую за этот вопрос. –

$("buttonid").click(function() { 
$("divid").toggle(); 
});

Buttonid - идентификатор кнопки, который вы будете нажать DIVID - идентификатор DIV, который вам нужно, чтобы показать/скрыть

Примечание: включают JQuery скрипт

источник

2012-04-19 06:41:05 Thiliban

Я не понял, вы можете немного описать мой код –

Чтобы использовать идентификатор в селекторе jQuery, он должен иметь префикс хеша: '$ (" # buttonid ")' и т. Д. – steveukx

Я отредактировал ответ с ссылкой, но здесь это снова: [jQuery tutorial] (http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery) –

Если вы не используете 3 участника JavaScript (например, JQuery), а затем использовать его:

document.getElementById('target-id').style.display = 'none'; // hide it 
document.getElementById('target-id').style.display = 'block'; // show it (for block element, eg: div) 
document.getElementById('target-id').style.display = 'inline'; // show it (for inline element, eg: span)

Пример (1):

<div id="target-id">hello workd</div> <!-- attribute: id --> 
<a href="#" onclick="document.getElementById('target-id').style.display = 'none'; return false;">hide it</a> 
<a href="#" onclick="document.getElementById('target-id').style.display = 'block'; return false;">show it</a>

Пример (2):

<div id="targetid" class="image_one" onclick="document.getElementById('targetid').style.display = 'none';"><img src="image/imageone.png"/></div> <!-- adding onclick to hide this element when you click it --> 

<div class="option_image" onclick="document.getElementById('targetid').style.display = 'block';"><img src="image/option_1.png"/></div> <!-- adding onclick to show element #targetid when you click this -->

источник

2012-04-19 06:42:57

. Я хочу, чтобы при загрузке страницы firt два dic были видны, и когда я нажимаю кнопку, второй div должен открыться, я добавил ваш код, но не работает –

Просто добавление моего кода выше не заставит его работать. Вам нужно добавить id = "something" в целевые элементы (элементы для отображения/скрытия). И убедитесь, что он уникален (другие элементы не имеют одинакового идентификатора). После этого поместите onclick = "..." в триггерные элементы (элементы, которые при нажатии на него будут отображать/скрывать целевые элементы). И будет проще, если вы используете стороннюю библиотеку, например jQuery. –

да, но я также добавил мой я размещаю в своем коде –

-1

вы можете попробовать т его:

$ (". image_one"). toggle();

код выше захватывает элемент по названию класса. Если у вас нет класса, вы можете получить его по id:

$ ("# image_one"). Toggle();

надеюсь, что это полезно

источник

2012-04-19 06:57:04

путем переключения скрывается –

будет скрываться и отображаться. –

Автор попросил скрыть ON CLICK, плюс - это худшая версия уже принятого ответа, размещенная более чем за 15 минут до вашего. – Jarema

Как Элвин Мухаммад отправил, вы можете полностью изменить способ отображения вещи. Итак, настройка его решения дала мне такой результат:

Как это работает?

-Нажмите «Вопрос», чтобы отобразить ответ, нажмите «Ответить», чтобы скрыть ответ (вопрос всегда отображается). Итак, просто замените вопрос и ответ своими собственными div.

<a href="#" onclick="document.getElementById('target-id').style.display = 'block'; return false;">Question</a> 
 
<div id="target-id" style="display: none;"><a href="#" onclick="document.getElementById('target-id').style.display = 'none'; return false;">Answer</a> </div> <!-- attribute: id -->

Edit: Дело в том, следует отметить, что для каждой пары Вопрос/Ответ, вы будете нуждаться в другой «целевой идентификатор».

источник

2014-10-23 18:45:22

Как скрыть или показать DIV по щелчку в HTML

ответ

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