隐藏/显示其他分区

我使用下面的JavaScript代码隐藏和显示一些分区。当我点击一个图标时，它展开一个div。当我点击另一个图标时，它展开另一个div，但不关闭原始div。我希望它一次只能打开一个div，而当你点击另一个图标时打开的div会关闭。隐藏/显示其他分区

<script type="text/javascript"> 
    function unhide(divID) { 
     var item = document.getElementById(divID); 
     if (item) { 
     item.className=(item.className=='hidden')?'unhidden':'hidden'; 
     } 
    } 
</script> 

<script type="text/Javascript"> 
    function hideshow(id) { 
    if (document.getElementById(id).style.display == ""){  
     document.getElementById(id).style.display = "none"; 
     } else { 
     document.getElementById(id).style.display=""; 
     }     
    } 
</script><!--javascript to hide and unhide a div-->

下面是我的一些HTML的：

<div class="row" id="rowTitles"> 
      <div class="col-sm-3"> 
       <center> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('foryou')"><img src="images/icon_you.png" onmouseover="this.src='images/icon_you_hover.png'" onmouseout="this.src='images/icon_you.png'" class="img-responsive" border="0"></a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       <div class="row" style="margin-top:1%"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('foryou')">FOR YOU</a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       </center> 
      </div><!--end col-sm-4--> 
      <div class="col-sm-3"> 
       <center> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('forteam')"><img src="images/icon_team.png" onmouseover="this.src='images/icon_team_hover.png'" onmouseout="this.src='images/icon_team.png'" class="img-responsive" border="0"></a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       <div class="row" style="margin-top:1%"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('forteam')">FOR YOUR TEAM</a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       </center> 
      </div><!--end col-sm-4--> 
      <div class="col-sm-3"> 
       <center> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('forcustomers')"><img src="images/icon_community.png" onmouseover="this.src='images/icon_community_hover.png'" onmouseout="this.src='images/icon_community.png'" class="img-responsive" border="0"></a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       <div class="row" style="margin-top:1%"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('forcustomers')">FOR OUR CUSTOMERS</a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       </center> 
      </div><!--end col-sm-4--> 
      <div class="col-sm-3"> 
       <center> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('forcommunity')"><img src="images/icon_network.png" onmouseover="this.src='images/icon_network_hover.png'" onmouseout="this.src='images/icon_network.png'" class="img-responsive" border="0"></a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       <div class="row" style="margin-top:1%"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('forcommunity')">FOR OUR COMMUNITY</a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       </center> 
      </div><!--end col-sm-4--> 
     </div><!--end row--> 



<div class="descriptions"> 
    <div id="foryou" style="display:none;margin-top:2%"> 
     <div style="padding-top:3%"> 
     <b>For you!</b><br> DESCRIPTION 
     </div> 
    </div><!--end ForYou--> 
    <div id="forteam" style="display:none;margin-top:2%"> 
     <div style="padding-top:3%"> 
     <b>For your team!</b><br> DESCRIPTION 
     </div> 
    </div><!--end ForTeam--> 
    <div id="forcustomers" style="display:none;margin-top:2%"> 
     <div style="padding-top:3%"> 
     <b>For our customers!</b><br> DESCRIPTION 
    </div> 
    </div><!--end ForCommunity2--> 
    <div id="forcommunity" style="display:none;margin-top:2%"> 
     <div style="padding-top:3%"> 
     <b>For our community!</b><br> DESCRIPTION 
    </div> 
    </div><!--end ForCommunity--> 

    </div><!--end descriptions-->

来源

2017-02-28 Ashley K

向您要隐藏/显示的div添加一个通用类。然后在隐藏显示功能开始时隐藏所有元素，并只显示相关元素。这将是一个更清洁，如果你使用jquery这个，但将工作在香草js – scrappedcola

我对JavaScript很不熟悉。我会添加什么来隐藏除有问题的元素之外的所有元素？ –

我最终计算出来。我改变了我的JavaScript到下面，并保持我的HTML相同。

<script type="text/javascript"> 
function hideshow(d) 
{ 
var onediv = document.getElementById(d); 
var divs=['foryou','forteam','forcustomers','forcommunity']; 
for (var i=0;i<divs.length;i++) 
    { 
    if (onediv != document.getElementById(divs[i])) 
    { 
    document.getElementById(divs[i]).style.display='none'; 
    } 
    } 
onediv.style.display = 'block'; 
} 
</script>

来源

2017-03-06 20:57:10

您可以使用此jQuery脚本来隐藏自己的股利。：D你需要准确的为你的html文件吗？我也可以为该文件编写它，但我认为你可以处理它。

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("#hide").click(function(){ 
 
     $("div").hide(); 
 
    }); 
 
    $("#show").click(function(){ 
 
     $("div").show(); 
 
    }); 
 
}); 
 
</script> 
 
<style> 
 
img{ 
 
width: 150px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div> 
 
<img src=https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg> 
 
</div> 
 
<button id="hide">Hide</button> 
 
<button id="show">Show</button> 
 

 
</body> 
 
</html>

来源

2017-02-28 21:27:11

隐藏/显示其他分区

回答

相关问题