隱藏/顯示其他分區

我使用下面的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

隱藏/顯示其他分區

回答

相關問題