如何实现用于隐藏和显示内容的Javascript按钮？
如何实现用于隐藏和显示内容的Javascript按钮？
提问于 2018-10-11 01:27:21
我正在寻找解决我已经有一段时间的问题的方法。基本上我有5个图像链接，如果我点击其中一个必须出现一个文本里面的div。如果我点击另一个链接，之前的div必须消失，并且必须出现相应的div。问题是我不能给当前选中的图像赋予样式。除此之外，我还有下面的5个其他链接，它们应该与上面的图像具有相同的链接，即使必须选择不同格式的链接。有谁能够帮助我？
回答 2
Stack Overflow用户
发布于 2018-10-11 09:31:39
可以尝试嵌套div - 具有文本内容的div可以通过css隐藏。对于每个图像div，可以进行onclick，找到嵌套在图像div中的类/ id并切换类
$( "#click-me" ).click(function() {
$('#text').toggleClass( "hidden" );
});.hidden {
visibility: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='click-me'>
<img src='https://i.stack.imgur.com/sM0BC.png'/>
<div id='text' class='hidden'>
Text
</div>
</div>你可以在矩阵中做这样的事情。可以单击，将所有这些设置为隐藏，然后切换可见的唯一ID。
Stack Overflow用户
发布于 2018-10-11 10:57:58
像这样的东西
https://codepen.io/CthuKi/pen/YqZvRv
<div class="menu">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<section class="cnt">
<div id="div1" class="targetDiv">Content 1</div>
<div id="div2" class="targetDiv">Content 2</div>
<div id="div3" class="targetDiv">Content 3</div>
<div id="div4" class="targetDiv">Content 4</div>
</section>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100002878
复制相关文章
相似问题