показывать и скрывать div с помощью радио кнопок внутри скрытого div

Question

В основном у меня есть три изображения (назовите их img1, img2, img3) с тремя меню, связанными с каждым. (меню1, меню2, меню3)

Когда пользователь нажимает img1, должно появиться меню1 с тремя вариантами переключателей (rad1, rad2, rad3). Скажем, пользователь нажимает rad2, затем следует скрыть menu1 и должно появиться img2 (но rad2 все равно следует выбрать). Когда нажата кнопка img2, меню2 должно появиться с выбранным rad2. Затем, если щелкнуть по rad3, menu2 скрывается и отображается img3 (но rad3 по-прежнему выбран). И так далее.

Как закодировать это в javascript?

Answer 1

Вот пример того, как показать скрытый элемент, нажав на изображение.

<script language="javascript">
function showDiv() {
  mydiv = document.getElementById('div1');
  mydiv.style.display = 'block';
}
</script>


<div id='div1' style="display:none;"> 
  <!-- content -->
</div>

<img src='img.gif' onclick='showDiv();'/>

Answer 2

Это должно быть так же просто, как:

function img1clk() {
    menu1div.style.display = "block";
}
function menu1radclk() {
    menu1div.style.display = "none";
    img1div.style.display = "block";
    menu2div.style.display = "block";
}

и так далее. Вам придется инициализировать элементы, чтобы их свойство onClick указывало на правильную функцию, но это просто

img1div.onclick = ing1clk();

или в формате HTML

<div onclick="img1clk()"><img src="..."></div>

Надеюсь, это поможет тебе!

Answer 3

Если все 3 меню по сути одинаковы, но выглядят по-разному, почему бы не вызывать одно и то же меню каждый раз, а менять его класс CSS?

Кроме того, я не мог согласиться с тем, что jQuery - это путь. Собственная документация на сайте jQuery, я считаю, немного отстойной, но как только вы освоите основы, она станет действительно интуитивной.

Answer 4

Это становится довольно просто, если вы используете встроенные методы jQuery, такие как show () или hide () . Не изобретай велосипед и все такое :) 1005 *