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时要显示或隐藏的内容。 b
$ b

toggle（）：每次点击都会在显示区块和显示区域之间切换。

fadeIn（）：会做同样的事情如show（），但有一个很好的淡出动画。

---

方法2

新方法是使用 CSS动画。测试往往表明CSS在处理动画时的性能优于jQuery。

示例这里

HTML $ b

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

CSS

  #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 （请参阅小提琴）如果您不希望元素在不可见时保留页面空间。

使用css的美妙之处在于您可以制作任何您想要的动画。这个代码只会在 Active 类添加到元素时触发动画。

以下是一些动画示例。

JAVASCRIPT （'click'，function（）{
var（$'$'$'$'$ $ $'$'$ $ $ $''$' （''）;
$（this）.addClass（'Active'）。siblings（）。removeClass ＃'+ divID）.addClass（'Active'）。siblings（）。removeClass（'Active'）;
}）

最后，添加一些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"

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

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.

解决方案

METHOD 1

This can be done much easier with jQuery code.

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

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.

---

METHOD 2

The new way is to use CSS animations. Tests tend to show that CSS is better on performance at handling animations than 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;}
}

Add display:none/block along with opacity (see fiddle) if you do not want the element to reserve page space when it is not visible.

The beauty of using css is you can make the animation anything you want. This code will simply trigger the animation when the Active class is added to the element.

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

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屋！