Javascript保持隐藏div直到你点击一个按钮，需要帮助修改 [英] Javascript keeps a div hidden until you click a button, need help modifying
本文介绍了Javascript保持隐藏div直到你点击一个按钮，需要帮助修改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要帮助，以便当我点击一个链接并出现一个div，然后点击另一个链接时，前一个链接消失。
让我们说我点击链接'关于'，div出现，很好。然后我点击'帮助'，那个div刚刚出现OVER'关于'使事情变得混乱。
< script type =文本/ JavaScript的>
函数取消隐藏（divID）{
var item = document.getElementById（divID）;
if（item）{
item.className =（item.className =='hidden'）？'unhidden'：'hidden';
}}
< / script>
^这是我的代码，下面是我的网站中的示例：
< div id =aboutclass =hidden>
< div class =content3>
< p>这是关于部分。< / p>
< p>目前仍在进行中。< / p>
< / div>
< / div>
类'content3'只是我的css文件中的样式。
.content3 {
background-color：#FFFFFF;
width：750px;
height：600px;
padding：5px;
padding-left：40px;
margin-top：-650px;
margin-left：auto;
margin-right：auto;
更新：
对不起，我应该详细说明..
我需要能够基本点击第一个链接，并显示一个文本框。
然后点击第二个链接，将隐藏与第一个链接关联的文本框并显示与第二个链接关联的新文本。
这是我的完整代码：
HTML
<！DOCTYPE html>
< html>
< head>
< link rel =stylesheettype =text / csshref =main.css>
< script type =text / javascript>
函数取消隐藏（divID）{
var item = document.getElementById（divID）;
if（item）{
item.className =（item.className =='hidden'）？'unhidden'：'hidden';
}}
< / script>
< / head>
< body>
< div class =title>
< p class =text_header> Benjamin Midyette< / p>
< p style =margin-top：-50px>计算机/网络工程师，Web开发人员< / p>
< / div>
< div class =contentalign =left>
< p style =padding-top：20px>
< a href =javascript：unhide（'link'）class =button>这是一个链接< / a>< br>< br>
< a href =javascript：unhide（'about'）class =button>关于< / a>
< / p>
< / div>
< div id =Resumeclass =content2>< / div>
< div id =linkclass =hiddenstyle =position：absolute; left：300px; margin-top：-700px;>
< img alt =A Linksrc =pictures / link.pngheight =420width =420>
< / div>
< div id =aboutclass =hidden>
< div class =content3>
< p>这是关于部分。< / p>
< p>目前仍在进行中。< / p>
< / div>
< / div>
< / body>
< / html>
CSS：
body {
background-image：url（'http://www.nsgaming.us/pictures/nebula.png'）;
背景重复：不重复;
背景大小：100％自动;
background：url（'http://www.nsgaming.us/pictures/nebula.png'）fixed 100％100％;}
/ *文字造型* /
.text_header {
font-size：72px
}
.title {
margin-top：-30px;
margin-left：auto;
margin-right：auto;
text-align：center;
颜色：#ffffee;
width：600px;
border-radius：8px;
background-color：＃000000;
background：rgba（0,0,0，.9）;
padding-bottom：1px;
}
/ *顶部按钮样式* /
.button {
border：2px纯黑色;
背景：＃3B3B3B; / *＃8C8C8C * /
padding：3.5px 5px;
border-radius：4px;
-webkit-border-radius：4px;
-moz-border-radius：4px;
颜色：白色;
font-size：18px;
font-family：'Lucida Grande'，Helvetica，Arial，Sans-Serif;
text-decoration：none;
}
.button：hover {
background：＃770819;
color：#ffffff;
text-decoration：none;}
.button：active {
background：＃590819;}
.content {
margin-top：40px ;
border：1px纯黑色;
border-radius：8px;
不透明度：0.8;
背景：＃222222;
width：175px;
height：400px;
padding-left：20px;
padding-top：0px;}
.content2 {
background-color：＃222222;
border-radius：4px;
width：800px;
height：650px;
padding：5px;
padding-left：40px;
margin-top：-401px;
margin-left：auto;
margin-right：auto;
}
.content3 {
background-color：#FFFFFF;
width：750px;
height：600px;
padding：5px;
padding-left：40px;
margin-top：-635px;
margin-left：auto;
margin-right：auto;
}
.hidden {
display：none; }
.unhidden {
display：block; }
container {
align：right;}
opener {
align：left;}
解决方案
如果您想在点击按钮时显示和隐藏特定div，您可以这样做。
$ b
< style>
.hidden {
display：none;
}
.unhidden {
display：block;
}
< / style>
< script type =text / javascript>
函数取消隐藏（clickedButton，divID）{
var item = document.getElementById（divID）;
if（item）{
if（item.className =='hidden'）{
item.className ='unhidden';
clickedButton.value ='隐藏'
}其他{
item.className ='隐藏';
clickedButton.value ='取消隐藏'
}
}}
< / script>
< body>
< div id =aboutclass =hidden>
< div class =content3>
< p>这是关于部分。< / p>
< p>目前仍在进行中。< / p>
< / div>
< / div>
< input type =buttononclick =unhide（this，'about'）value =unhide>
< / body>
更新：传递您想要消失的其他div ID点击一个div。请用下面的代码更新您的代码。
脚本
< script type =text / javascript>
函数取消隐藏（divID，otherDivId）{
var item = document.getElementById（divID）;
if（item）{
item.className =（item.className =='hidden'）？'unhidden'：'hidden';
}
document.getElementById（otherDivId）.className ='hidden';
}
< / script>
HTML
< p style =padding-top：20px>
< a href =javascript：unhide（'link'，'about'）class =button>这是一个连结< / a>< br>< br>
< a href =javascript：unhide（'about'，'link'）class =button>关于< / a>
< / p>
Basically, my code right now keeps a few of the divs I have on my website hidden and then when you click on a link, it makes the divs appear.
I need help so that it so that when I click one link and a div appears and I click on another link, the previous one disappears.
So let's say I click the link 'About', the div appears, good. Then I click on 'Help' and that div just appears OVER 'About' making things messy.
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
^That is my code, here is a sample of it in my website:
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
The class 'content3' is just styling in my css file.
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-650px;
margin-left:auto;
margin-right:auto;
}
UPDATE:
Sorry, I should elaborate more.. I need to be able to basically click a first link and have it show a box of text.
and then click a second link that will hide that box of text associated with the first link and show a new one that is associated with the second link.
This is my FULL code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
</head>
<body>
<div class="title">
<p class="text_header">Benjamin Midyette</p>
<p style="margin-top:-50px">Computer/Network Engineer, Web Developer</p>
</div>
<div class="content" align="left">
<p style="padding-top:20px">
<a href="javascript:unhide('link')" class="button">This is a link</a><br><br>
<a href="javascript:unhide('about')" class="button">About</a>
</p>
</div>
<div id="Resume" class="content2"></div>
<div id="link" class="hidden" style="position:absolute; left:300px; margin-top:-700px;">
<img alt="A Link" src="pictures/link.png" height="420" width="420">
</div>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
</body>
</html>
CSS:
body {
background-image:url('http://www.nsgaming.us/pictures/nebula.png');
background-repeat: no-repeat;
background-size: 100% auto;
background: url('http://www.nsgaming.us/pictures/nebula.png') fixed 100% 100%;}
/*Text styling*/
.text_header {
font-size:72px
}
.title {
margin-top:-30px;
margin-left:auto;
margin-right:auto;
text-align: center;
color:#ffffee;
width:600px;
border-radius:8px;
background-color:#000000;
background:rgba(0,0,0,.9);
padding-bottom:1px;
}
/*Top Button styling*/
.button {
border:2px solid black;
background: #3B3B3B; /*#8C8C8C*/
padding: 3.5px 5px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: white;
font-size: 18px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
}
.button:hover {
background: #770819;
color: #ffffff;
text-decoration:none;}
.button:active {
background: #590819;}
.content {
margin-top:40px;
border: 1px solid black;
border-radius:8px;
Opacity:0.8;
background:#222222;
width:175px;
height:400px;
padding-left:20px;
padding-top: 0px;}
.content2 {
background-color:#222222;
border-radius:4px;
width:800px;
height:650px;
padding:5px;
padding-left:40px;
margin-top:-401px;
margin-left:auto;
margin-right:auto;
}
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-635px;
margin-left:auto;
margin-right:auto;
}
.hidden {
display: none; }
.unhidden {
display: block; }
container {
align:right;}
opener {
align:left;}
解决方案
You could do like this, if you want to display and hide particular div on click of button.
<style>
.hidden{
display:none;
}
.unhidden{
display:block;
}
</style>
<script type="text/javascript">
function unhide(clickedButton, divID) {
var item = document.getElementById(divID);
if (item) {
if(item.className=='hidden'){
item.className = 'unhidden' ;
clickedButton.value = 'hide'
}else{
item.className = 'hidden';
clickedButton.value = 'unhide'
}
}}
</script>
<body>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
<input type="button" onclick="unhide(this, 'about') " value="unhide">
</body>
UPDATE: Pass the other div id which you want to make disappear on click of div one. Please update your code with below's code.
SCRIPT
<script type="text/javascript">
function unhide(divID, otherDivId) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
document.getElementById(otherDivId).className = 'hidden';
}
</script>
HTML
<p style="padding-top:20px">
<a href="javascript:unhide('link', 'about')" class="button">This is a link</a><br><br>
<a href="javascript:unhide('about', 'link')" class="button">About</a>
</p>
这篇关于Javascript保持隐藏div直到你点击一个按钮，需要帮助修改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
