点击目标图标时切换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>

- PanicBus

---

首先，你需要学会如何创建一个jsFiddle，这样别人就可以帮助你调试代码了。这对你个人来说也非常有用。下面是经过整理并放入jsFiddle的代码。 - DevlshOne

是的，你的头部缺少一些闭合的</a>标签。 - Jeffpowrs

仅供澄清：任何键盘上都没有“jsFiddle”键 :) - Hashem Qolami

将你的脚本从你的风格中分离出来。 - abc123

谢谢大家的建议。是的，我的代码很杂乱。即使说我是初学者也有点勉强，但我正在努力改进。我以后也会使用jsFiddle。谢谢。 - PanicBus

@abc123 那是我的大问题！谢谢。 - PanicBus

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

描述

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

- abc123

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>

- PanicBus

Answer 3

您可以在单击锚标记时简单地附加隐藏显示事件。我使用了jQuery来解决这个问题。我所做的是将单击事件绑定到锚标记，并拾取潜在的div元素id的标记的href。然后，您只需隐藏和显示这个div即可。

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

你可以在这里找到完整的 jsFiddle 链接。

- achakravarty