4

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

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

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>
4

3 回答 3

3

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

描述

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

于 2013-08-24T23:53:19.193 回答
0

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

<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>
于 2013-08-25T03:22:39.620 回答
0

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

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

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

于 2013-08-26T15:43:15.390 回答