Question

基本上我有三个图像（称为img1，img2，img3），每个图像与三个菜单相关联。（menu1，menu2，menu3）

当用户点击img1时，menu1会弹出三个单选按钮选项（rad1，rad2，rad3）。假设用户单击rad2，则menu1应该隐藏并且应该出现img2（但仍应选择rad2）。单击img2时，menu2将显示为选择了rad2。然后，如果单击rad3，则menu2隐藏并显示img3（但仍然选择rad3）。等等等等。

如何在javascript中对此进行编码？

Answer 1

以下是如何通过单击图像显示隐藏div的示例。

<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

如果您使用jQuery的内置方法（例如show()或hide()），这将变得非常简单。不要重新发明轮子以及所有这些：）

Answer 4

如果所有3个菜单基本相同但只是看起来不同，为什么不每次都调出相同的菜单但是改变它的css类？

另外，我不能同意jQuery是要走的路。 jQuery网站自己的文档我发现有点蹩脚，但是一旦你掌握了基础知识，它就会非常直观。

使用隐藏div中的单选按钮显示和隐藏div

4 个答案: