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;
}

的描述 的

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

Answer 2

经过一番摆弄，这就是我最终想出来的。适用于良好的图像切换。

<style type="text/css">
  .hidden { display: none; }
  .unhidden { display: inline; }
</style>

<style type="text/css">
    .hidden {
        display: none;
    }
    .unhidden {
        display: inline;
    }
</style>
<script type="text/javascript">
    function unhide(divID) {
        var item = document.getElementById(divID);
        if (item) {
            item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
        }
    }
</script>
<a href="javascript:unhide('camera');"> 
          <img src="img/camera.png" /></a>
 <a href="javascript:unhide('bike');">  
          <img src="img/bike.png" /></a>
 <a href="javascript:unhide('baby');"> 
          <img src="img/baby.png" /></a>

<div id="camera" class="hidden">
    <img src="img/camera1.jpg" />
</div>
<div id="bike" class="hidden">
    <img src="img/bike1.jpg" />
</div>
<div id="baby" class="hidden">
    <img src="img/baby1.jpg" />
</div>

Answer 3

您只需在点击锚标记时附加隐藏显示事件即可。我用jQuery来解决这个问题。我所做的是我绑定了锚标记的click事件并拾取了标签的href，这可能是div元素的id。然后你可以隐藏并显示div

$('img').click(function () {
    var divId = $(this).parent('a').attr('href');
    $('div:not(' + divId + ')').hide();
    $(divId).show();
});

您可以找到完整的jsFiddle here

单击目标图标时切换div的显示

3 个答案:

Demo jsFiddle