简单的div onclick显示javascript [英] simple div onclick show javascript

问题描述

当我点击任何链接时，对应的div显示
，但是当我点击下一个链接时，新点击的潜水显示以及之前点击的。我希望previos div隐藏。新开发请有人帮我........

这是链接的html代码：

 < a class =hideonclick =showdiv（'firstimpression'）;href =＃>第一印象< / a> 
< a class =hideonclick =showdiv（'speaking'）;href =＃>说话< / a> 
 < a class =hideonclick =showdiv（'taste'）;href =＃>口味< / a> 
< a class =hideonclick =showdiv（'saliva'）;href =＃>唾液< / a> 
< a class =hideonclick =showdiv（'cleaning'）; HREF = ＃ >清洁和LT; / A> 
< a class =hideonclick =showdiv（'nighttime'）; href =＃>夜间时间< / a> 
< a class =hideonclick =showdiv（'singledenture'）; href =＃>单个假牙< / a> 
< a class =hideonclick =showdiv（'soreness'）; HREF = ＃ >酸痛< / A> 
< a class =hideonclick =showdiv（'burning'）; HREF = ＃ >燃烧< / A> 
< a class =hideonclick =showdiv（'adapting'）; HREF = ＃ >适应< / A> 
< a class =hideonclick =showdiv（'futureconsideration'）; href =＃>未来考虑< / a> 
< a class =hideonclick =showdiv（'conclusion'）; HREF = ＃ >总结< / A> 
  

这些是div：

 < div id =firstimpressionclass =patientinfodivs> 
< div id =speakingclass =patientinfodivs> 
  

.....等等

Javascript代码

 < script type =text / javascript> 
 function showdiv（id）{
 document.getElementById（id）.style.display =block; 
} 
< / script> 
  

解决方案

尽管我讨厌创建全局变量，但他们只是有时候会很方便......

  var _hidediv = null; 
 function showdiv（id）{
 if（_hidediv）
 _hidediv（）; 
 var div = document.getElementById（id）; 
 div.style.display ='block'; 
 _hidediv = function（）{div.style.display ='none'; }; 
 
 
 
 
 
 $ b 
这会阻止你不必要地搜索div，找到你应该隐藏的那个
 
 $ b 编辑：扩展@ StevenRoose的建议： 
 
 
  var _targetdiv = null; 
函数showdiv（id）{
 if（_targetdiv）
 _targetdiv.style.display ='none'; 
 _targetdiv = document.getElementById（id）; 
 _targetdiv.style.display ='block'; 
} 
  
 
when I click on any  link the correspoding div shows up
but when I click the next link, the newly clicked dive shows up as well as the previously clicked. I would like the previos div to hide. NEW to development please some one help me........

this is the html code for links:
<a class="hide" onclick="showdiv('firstimpression'); " href="#">First Impression</a>
<a class="hide" onclick="showdiv('speaking'); " href="#">Speaking</a>
<a class="hide" onclick="showdiv('eating'); " href="#">Eating</a>
<a class="hide" onclick="showdiv('taste'); " href="#">Taste</a>
<a class="hide" onclick="showdiv('saliva'); " href="#">Saliva</a>
<a class="hide" onclick="showdiv('cleaning');" href="#">Cleaning</a>
<a class="hide" onclick="showdiv('nighttime');" href="#">Night Time</a>
<a class="hide" onclick="showdiv('singledenture');" href="#">Single Denture</a>
<a class="hide" onclick="showdiv('soreness');"  href="#">Soreness</a>
<a class="hide" onclick="showdiv('burning');" href="#">Burning</a>
<a class="hide" onclick="showdiv('adapting');" href="#">Adapting</a>
<a class="hide" onclick="showdiv('futureconsideration');" href="#">Future Consideration</a>
<a class="hide" onclick="showdiv('conclusion');" href="#">Conclusion</a>
these are the divs:
<div id="firstimpression" class="patientinfodivs">
<div id="speaking" class="patientinfodivs">
.....and so on

Javascript code
<script type="text/javascript">
function showdiv(id){
document.getElementById(id).style.display = "block";
}
</script>

解决方案
As much as I hate creating global variables, they just come in so handy sometimes...
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
This will prevent you from needlessly searching through divs to find the one you should hide.

Edit: Expanding upon @StevenRoose's suggestion:
var _targetdiv = null;
function showdiv(id) {
    if(_targetdiv)
        _targetdiv.style.display = 'none';
    _targetdiv = document.getElementById(id);
    _targetdiv.style.display = 'block';
}


                        
这篇关于简单的div onclick显示javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！