方法一
使用 jQuery 代码可以更轻松地完成此操作。
EXAMPLE HERE
HTML
<img id="img1"/>
<img id="img2"/>
<div id="div1"/>
<div id="div2"/>
<div id="div3"/>
<div id="div4"/>
JQUERY
$("#img1").on('click', function() {
$(this).hide();
$("#div2, #div3, #div4").hide();
$("#div1").show();
});
只需将显示/隐藏替换为单击 img 时要显示或隐藏的内容。
重要提示：
你也可以用 toggle() 或 fadeIn() /fadeOut() 替换显示/隐藏
toggle() : 每次点击都会在显示块和不显示之间交替显示。
fadeIn() : 和 show() 做的一样，但是有一个漂亮的淡入淡出动画。
方法 2
新方法是使用 CSS 动画。测试往往表明 CSS 在处理动画方面的性能优于 jQuery。
EXAMPLE HERE
HTML
<div id="imgWrap">
<img id="img1" class="Active" data-box="div1"/>
<img id="img2" data-box="div2"/>
<img id="img3" data-box="div3"/>
<img id="img4" data-box="div4"/>
</div>
<div id="divWrap">
<div id="div1" class="Active">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>
CSS
#divWrap div{
opacity:0;
}
#divWrap .Active{
opacity:1;
-webkit-animation:fadeIn ease-in-out 0.5s;
animation:fadeIn ease-in-out 0.5s;
}
@-webkit-keyframes fadeIn{
from{opacity:0;}
to {opacity:1;}
}
@keyframes fadeIn{
from{opacity:0;}
to {opacity:1;}
}
如果您不希望元素在不可见时保留页面空间，请添加display:none/block 和opacity （参见小提琴）。
使用 css 的美妙之处在于您可以制作任何您想要的动画。当Active 类添加到元素时，此代码将简单地触发动画。
Here are some animation examples.
JAVASCRIPT
$('img').on('click', function () {
var divID = $(this).attr('data-box');
$(this).addClass('Active').siblings().removeClass('Active');
$('#' + divID).addClass('Active').siblings().removeClass('Active');
})
最后像上面一样添加一些 javascript 或 jQuery 来添加点击时的 Active 类。在此示例中，Active 已被硬编码为 html 中的一个元素，以在页面加载时创建默认的活动元素。
此代码还将 Active 添加到单击的按钮。这是可选的，但可用于将 CSS 样式添加到当前活动的按钮。