onclick显示div,但隐藏其他人点击 [英] onclick show div, but hide when other one is clicked
问题描述
我正在使用本主题的答案中的代码#1
- >显示div onclick并隐藏触发它的图片
< img src =图标/ note_add.pngonclick =show('comment',this)/>
,那么该函数将对其应用显示无:
function show(target,trigger){
document.getElementById(target).style.display ='block ;
trigger.style.display =none
}
,但我使用这种onclick功能在页面上有4个div。当用户点击图片1时,div 1出现,但当他们点击图片2切换div 2时,div 1仍然可见。
我如何制作它以便在另一个触发器显示时打开div关闭?我只希望在页面上打开一个div,但现在,所有4个都可以打开。
方法1 / h1>使用 jQuery 代码可以轻松完成此操作。
HTML
< img id =img1/>
< img id =img2/>
< div id =div1/>
< div id =div2/>
< div id =div3/>
< div id =div4/>
JQUERY
< (''click',function(){
$(this).hide();
$(#)$($#$) div2,#div3,#div4)。hide();
$(#div1)。show();
});
只需将show / hide替换为单击img时要显示或隐藏的内容。您可以使用toggle()或fadeIn()/ fadeOut()来替换show / hide。
b$ b
toggle():每次点击都会在显示区块和显示区域之间切换。 fadeIn():会做同样的事情如show(),但有一个很好的淡出动画。 新方法是使用 CSS动画。测试往往表明CSS在处理动画时的性能优于jQuery。 HTML $ b CSS 添加 使用css的美妙之处在于您可以制作任何您想要的动画。这个代码只会在 JAVASCRIPT ('click',function(){ 最后,添加一些javascript或jQuery,如上所述在点击时添加Active类。在这个例子中,Active已经被硬编码为html中的一个元素,以在页面加载时创建一个默认的活动元素。 这个代码还将Active添加到单击的按钮上。这是可选的,但可用于将CSS样式添加到当前活动的按钮。 I'm working with the code from this topic's answer #1
-- "Show a div onclick and hide the image that triggered it" It works great, but I have 4 divs on a page using this onclick feature. When a user clicks on image 1, div 1 appears, but when they click on image 2 to toggle div 2, div 1 is still visible. How can I make it so that the open div closes when another one is triggered to show? I only want one div to be open on a page, but right now, all 4 can be open. This can be done much easier with jQuery code. HTML JQUERY Simply replace show / hide with what you want to show or hide when the img is clicked. TOP TIP:
You can also replace show/hide with toggle() or fadeIn() /fadeOut() toggle() : Will alternate between display block and display none with each click. fadeIn() : Will do the same as show() but with a nice fade animation. The new way is to use CSS animations. Tests tend to show that CSS is better on performance at handling animations than jQuery. HTML CSS Add The beauty of using css is you can make the animation anything you want. This code will simply trigger the animation when the Here are some animation examples. JAVASCRIPT Lastly add some javascript or jQuery as above to add the Active class on click. In this example Active has been hardcoded to one element in the html to create a default active element on page load. This code also adds Active to the button clicked. This is optional but can be used to add css styling to the currently active button. 这篇关于onclick显示div,但隐藏其他人点击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
方法2
< div id =imgWrap>
< img id =img1class =Activedata-box =div1/>
< img id =img2data-box =div2/>
< img id =img3data-box =div3/>
< img id =img4data-box =div4/>
< / div>
< div id =divWrap>
< div id =div1class =Active> 1< / div>
< div id =div2> 2< / div>
< div id =div3> 3< / div>
< div id =div4> 4< / div>
< / div>
#divWrap div {
opacity:0;
}
#divWrap .Active {
opacity:1;
-webkit-animation:fade进出0.5s;
动画:淡入淡入0.5s;
}
@ -webkit-keyframes fadeIn {b $ b from {opacity:0;}
to {opacity:1;}
}
@keyframes fadeIn {b $ b from {opacity:0;}
to {opacity:1;}
}
display:none / block
以及 opacity
(请参阅小提琴)如果您不希望元素在不可见时保留页面空间。
Active
类添加到元素时触发动画。
var($'$'$'$'$ $ $'$'$ $ $ $''$' ('');
$(this).addClass('Active')。siblings()。removeClass #'+ divID).addClass('Active')。siblings()。removeClass('Active');
})
<img src="Icons/note_add.png" onclick="show('comment', this)"/>
then the function would apply a "display none" to it:
function show(target, trigger){
document.getElementById(target).style.display = 'block';
trigger.style.display = "none"
}
METHOD 1
<img id="img1"/>
<img id="img2"/>
<div id="div1"/>
<div id="div2"/>
<div id="div3"/>
<div id="div4"/>
$("#img1").on('click', function() {
$(this).hide();
$("#div2, #div3, #div4").hide();
$("#div1").show();
});
METHOD 2
<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>
#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
along with opacity
(see fiddle) if you do not want the element to reserve page space when it is not visible.Active
class is added to the element.$('img').on('click', function () {
var divID = $(this).attr('data-box');
$(this).addClass('Active').siblings().removeClass('Active');
$('#' + divID).addClass('Active').siblings().removeClass('Active');
})