JavaScript显示/隐藏div [英] JavaScript Show/Hide divs
本文介绍了JavaScript显示/隐藏div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有人知道在单击div框时是否有某种方法可以使某个div隐藏？单击框后，某些应用程序div将隐藏。这是第一张图片：
当箱子隐藏时，其他div将重新调整到当前div的位置，然后移回标准视图。
第二张图片：
p>
代码：
< div class =container> < div class =row> < div class =col-md-4style =text-align：center;> < button onclick =projectCollab（）>< div id =decisionTreeBoxstyle =font-size：larger;>协作项目< / div>< /按钮> < / DIV> < div class =col-md-4style =text-align：center;> < div id =decisionTreeBoxstyle =font-size：larger;>协作处理文件< / div> < / DIV> < div class =col-md-4style =text-align：center;> < div id =decisionTreeBoxstyle =font-size：larger;>社交协作< / div> < / DIV> < / DIV> < hr /> < div class =row> < div class =col-md-4style =text-align：center;> < div id =decisionTreeOneDrive>< h3 id =innerBoxHeadings>< img src =/ TrainingResourceCenter / O365Training / PublishingImages / onedrive-logo.pngstyle =width：65px; height：65px; padding-bottom：5px; padding-right：10px; vertical-align：middle;/> OneDrive< / h3>< / div> < / DIV> < div class =col-md-4style =text-align：center;> < div id =decisionTreeProject>< h3 id =innerBoxHeadings>< img src =/ TrainingResourceCenter / O365Training / PublishingImages/Project.pngstyle =padding-bottom：5px; padding-right： 10px; vertical-align：middle;/> Project< / h3>< / div> < / DIV> < div class =col-md-4style =text-align：center;> < div id =decisionTreeSharePoint>< h3 id =innerBoxHeadings>< img src =/ TrainingResourceCenter / O365Training / PublishingImages / SharePointDecisionTree.pngstyle =padding-bottom：5px; padding-right： 10px; vertical-align：middle;/> SharePoint< / h3>< / div> < / DIV> < div class =col-md-4style =text-align：center;> < div id =decisionTreeTeams>< h3 id =innerBoxHeadings>< img src =/ TrainingResourceCenter / O365Training / PublishingImages / TeamsDecisionTree.pngstyle =padding-bottom：5px; padding-right： 10px; vertical-align：middle;/>团队< / h3>< / div> < / DIV> < div class =col-md-4style =text-align：center;> < div id =decisionTreePlanner>< h3 id =innerBoxHeadings>< img src =/ TrainingResourceCenter / O365Training / PublishingImages/PlannerDecisionTree.pngstyle =padding-bottom：5px; padding-right： 10px; vertical-align：middle;/> Planner< / h3>< / div> < / DIV> < div class =col-md-4style =text-align：center;> < div id =decisionTreeYammer>< h3 id =innerBoxHeadings>< img src =/ TrainingResourceCenter / O365Training / PublishingImages/YammerDecisionTree.pngstyle =padding-bottom：5px; padding-right： 10px; vertical-align：middle;/> Yammer< / h3>< / div> < / DIV> < / DIV> <脚本> function projectCollab（）{var x = document.getElementById（decisionTreeOneDrive）; if（x.style.display ===none）{x.style.display =block; } else {x.style.display =none;无视您的意见和建议您的意见和建议您的意见和建议您的意见和建议我的意见关于我们联系我们关于我们我们的团队我们的团队我们的团队我们的团队我们的团队我们的团队我们的团队我们的团队在文本中的javaScript代码后面，它似乎没有正常工作。
任何帮助/指南都会有所帮助，非常感谢！
解决方案您使用类似ID的div。尝试使用另一个选择器，例如数据属性。
< html>
< head>
< meta charset =UTF-8/>
< / head>
< body>
< div class =container>
< div class =row>
< div class =col-md-4style =text-align：center;>
< div data-collaborate =projectsstyle =font-size：larger;>协作项目< / div>
< / div>
< div class =col-md-4style =text-align：center;>
< div data-collaborate =filesstyle =font-size：larger;>协作文件< / div>
< / div>
< div class =col-md-4style =text-align：center;>
< div data-collaborate =sociallystyle =font-size：larger;>社交协作< / div>
< / div>
< / div>
< hr />
< div class =row>
< div class =col-md-4style =text-align：center;>
< div data-decision =projectsid =decisionTreeOneDrive>< h3 id =innerBoxHeadings>< img src =/ TrainingResourceCenter / O365Training / PublishingImages / onedrive-logo.png style =width：65px; height：65px; padding-bottom：5px; padding-right：10px; vertical-align：middle;/> OneDrive< / h3>< / div>
< / div>
< div class =col-md-4style =text-align：center;>
< div data-decision =projectsid =decisionTreeProject>< h3 id =innerBoxHeadings>< img src =/ TrainingResourceCenter / O365Training / PublishingImages / Project.pngstyle = padding-bottom：5px; padding-right：10px; vertical-align：middle;/> Project< / h3>< / div>
< / div>
< div class =col-md-4style =text-align：center;>
< div data-decision =filesid =decisionTreeSharePoint>< h3 id =innerBoxHeadings>< img src =/ TrainingResourceCenter / O365Training / PublishingImages / SharePointDecisionTree.pngstyle = padding-bottom：5px; padding-right：10px; vertical-align：middle;/> SharePoint< / h3>< / div>
< / div>
< div class =col-md-4style =text-align：center;>
< div data-decision =filesid =decisionTreeTeams>< h3 id =innerBoxHeadings>< img src =/ TrainingResourceCenter / O365Training / PublishingImages / TeamsDecisionTree.pngstyle = padding-bottom：5px; padding-right：10px; vertical-align：middle;/>团队< / h3>< / div>
< / div>
< div class =col-md-4style =text-align：center;>
< div data-decision =sociallyid =decisionTreePlanner>< h3 id =innerBoxHeadings>< img src =/ TrainingResourceCenter / O365Training / PublishingImages/ PlannerDecisionTree.pngstyle = padding-bottom：5px; padding-right：10px; vertical-align：middle;/> Planner< / h3>< / div>
< / div>
< div class =col-md-4style =text-align：center;>
< div data-decision =sociallyid =decisionTreeYammer>< h3 id =innerBoxHeadings>< img src =/ TrainingResourceCenter / O365Training / PublishingImages / YammerDecisionTree.pngstyle = padding-bottom：5px; padding-right：10px; vertical-align：middle;/> Yammer< / h3>< / div>
< / div>
< / div>
< script>
函数projectCollab（）{
var divsToCange = document.querySelectorAll（'[data-decision]'），
attr = this.getAttribute（'data-collaborate'）;
for（var i = 0; i< divsToCange.length; i ++）{
var d = divsToCange [i];
if（d.getAttribute（'data-decision'）== attr）{
d.style.display =（！d.style.display）？ '没有' ： '';
} else {
d.style.display ='';
}
}
return false;
}
var divButtons = document.querySelectorAll（'[data-collaborate]'）;
for（var i = 0; i< divButtons.length; i ++）{
divButtons [i] .addEventListener（'click'，projectCollab）;
}
< / script>
< / div>
< / body>
< / html>
Does anyone know if there is a way to make certain div's hide when clicking on a div box?
Upon clicking on the box, some applications div's will hide. Here is the first image:
Upon the boxes hiding, the other div's will realign in the spot of the current div's and then move back to standard view.
Second image:
Code:
<div class="container">
<div class="row">
<div class="col-md-4" style="text-align: center;">
<button onclick="projectCollab()"><div id="decisionTreeBox" style="font-size: larger;">Collaborate on Projects</div></button>
</div>
<div class="col-md-4" style="text-align: center;">
<div id="decisionTreeBox" style="font-size: larger;">Collaborate on Files</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div id="decisionTreeBox" style="font-size: larger;">Collaborate Socially</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4" style="text-align: center;">
<div id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div>
</div>
<div class="col-md-4" style="text-align: center;">
<div id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
</div>
<div class="col-md-4" style="text-align: center;">
<div id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div>
</div>
<div class="col-md-4" style="text-align: center;">
<div id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div>
</div>
<div class="col-md-4" style="text-align: center;">
<div id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div>
</div>
<div class="col-md-4" style="text-align: center;">
<div id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div>
</div>
</div>
<script>
function projectCollab() {
var x = document.getElementById("decisionTreeOneDrive");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</div>
Disregard the javaScript code in the text back it didn't seem to work properly at all.
Any help/guides would be helpful, thanks so much!
解决方案 You have div's with similair ID's. Try use another selector, as example data attributes.
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="projects" style="font-size: larger;">Collaborate on Projects</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="files" style="font-size: larger;">Collaborate on Files</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="socially" style="font-size: larger;">Collaborate Socially</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4" style="text-align: center;">
<div data-decision="projects" id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-decision="projects" id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-decision="files" id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-decision="files" id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-decision="socially" id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-decision="socially" id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div>
</div>
</div>
<script>
function projectCollab(){
var divsToCange = document.querySelectorAll('[data-decision]'),
attr = this.getAttribute('data-collaborate');
for(var i=0; i<divsToCange.length; i++){
var d = divsToCange[i];
if(d.getAttribute('data-decision') == attr){
d.style.display = (!d.style.display) ? 'none' : '';
}else{
d.style.display = '';
}
}
return false;
}
var divButtons = document.querySelectorAll('[data-collaborate]');
for(var i=0; i<divButtons.length; i++){
divButtons[i].addEventListener('click', projectCollab);
}
</script>
</div>
</body>
</html>
这篇关于JavaScript显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
