javascript - 单击目标图标时切换显示 div

Question

标题中有三个图标图像。它们包括一台相机、一辆自行车和一个婴儿。我想根据单击哪个图标隐藏/显示正文中的相应图像。单击下一个图标时，上一个图像应该隐藏。我还希望页面加载的默认设置为“隐藏”。

我还希望能够单击该图标一次以显示图像，然后再次单击该图标以重新隐藏。

CSS

img {
    margin: 15px;
}
.camera {
    display: none;
}
.bike {
    display: none;
}
.baby {
    display: none;
}

Javascript

var _hidediv = null;

function showdiv(id) {
    if (_hidediv) _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () {
        div.style.display = 'none';
    };
}

HTML

<a onclick="showdiv('camera');"> 
    <img src="camera.png" />
</a>
<a onclick="showdiv('bike');">
    <img src="bike.png" />
    <a onclick="showdiv('baby');">
        <img src="baby.png" />

        <div id="camera" style="display: none;"> 
            <img src="camera1.jpg" />
        </div>
        <div id="bike" style="display: none;"> 
            <img src="bike1.jpg" />
        </div>
        <div id="baby" style="display: none;">
            <img src="baby1.jpg" />
        </div>

Answer 1

Demo jsFiddle

HTML

<a onclick="showdiv('camera');"> 
  <img src="http://placehold.it/350x150" />
</a>
<a onclick="showdiv('bike');">
  <img src="http://placehold.it/350x200" />
</a>
<a onclick="showdiv('baby');">
  <img src="http://placehold.it/350x300" />
</a>    


<div id="camera" style="display: none;"> 
  <img src="http://placehold.it/350x150" />
</div>
<div id="bike" style="display: none;"> 
  <img src="http://placehold.it/350x200" />
</div>
<div id="baby" style="display: none;">
  <img src="http://placehold.it/350x300" />
</div>

JS

var _hidediv = null;
var previousDiv = null;
function showdiv(id) {
    if(_hidediv != null){
      _hidediv();
    }

    var div = document.getElementById(id);
    if(div != previousDiv)
    {
        div.style.display = 'block';
        _hidediv = function() { div.style.display = 'none'; };
        previousDiv = div;
    }
    else
    {
        previousDiv = null;
    }
}

CSS

img {
  margin: 15px;
}
.camera {
  display: none;
}
.bike {
  display: none;
}
.baby {
  display: none;
}

描述

这似乎可以满足您的所有需求。