Javascript 隐藏和取消隐藏div

我正在设计一个网页，其中我在某个点上被击中

我在一个div中使用了3个上传按钮，让div的id为“uploadDiv” 我有右箭头和下箭头图像

• 如果我单击向下箭头图像，应该显示“uploadDiv”的内容
• 如果我点击右箭头图像，“uploadDiv”的内容应该是隐藏的

图像应该在同一个位置

---

解决方案是什么？

最简单的方法之一是使用。

最简单的方法之一是使用。

函数hidediv（）{
if（document.getElementById）{//DOM3=IE5，NS6
document.getElementById（'uploadDiv'）。style.visibility='hidden'；
}
否则{
if（document.uploadDiv）{//Netscape 4
document.hideshow.visibility='hidden'；
}
否则{//IE 4
document.all.uploadDiv.style.visibility='hidden'；
}
}
}
函数showdiv（）{
if（document.getElementById）{//DOM3=IE5，NS6
document.getElementById（'uploadDiv'）。style.visibility='visible'；
}
否则{
if（document.layers）{//Netscape 4
document.uploadDiv.visibility='visible'；
}
否则{//IE 4
document.all.uploadDiv.style.visibility='visible'；
}
}
}

上面的脚本切换div.的style.visibility属性，该属性可以是“可见”或“隐藏”

使用onclick事件调用所需的hide或show div

摘自

函数hidediv（）{
if（document.getElementById）{//DOM3=IE5，NS6
document.getElementById（'uploadDiv'）。style.visibility='hidden'；
}
否则{
if（document.uploadDiv）{//Netscape 4
document.hideshow.visibility='hidden'；
}
否则{//IE 4
document.all.uploadDiv.style.visibility='hidden'；
}
}
}
函数showdiv（）{
if（document.getElementById）{//DOM3=IE5，NS6
document.getElementById（'uploadDiv'）。style.visibility='visible'；
}
否则{
if（document.layers）{//Netscape 4
document.uploadDiv.visibility='visible'；
}
否则{//IE 4
document.all.uploadDiv.style.visibility='visible'；
}
}
}

上面的脚本切换div.的style.visibility属性，该属性可以是“可见”或“隐藏”

使用onclick事件调用所需的hide或show div

---

摘自

在css文件中添加一个类

.hidden { display: hidden; }

将onclick事件添加到按钮

The button to hide
... onclick="document.getElementById('UploadDiv').className = '.hidden'" ....

The button to show
... onclick="document.getElementById('UploadDiv').className = '.default'" ....

---

在css文件中添加一个类

.hidden { display: hidden; }

将onclick事件添加到按钮

The button to hide
... onclick="document.getElementById('UploadDiv').className = '.hidden'" ....

The button to show
... onclick="document.getElementById('UploadDiv').className = '.default'" ....

---

听起来你在谈论某种形式的可折叠面板。根据源代码的底层架构，Microsoft的Ajax控制工具包有一个非常好的可折叠面板选项

另一个很好的选择是查看和组件

样本

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            collapsible: true
        });
    });
</script>
<div id="accordion">
    <h3><a href="#">File Upload</a></h3>
    <div>
       CONTENT HERE
    </div>
</div>

$（函数（）{
$（“手风琴”）。手风琴({
可折叠：正确
});
});
满足于此

听起来你在谈论某种形式的可折叠面板。根据源代码的底层架构，Microsoft的Ajax控制工具包有一个非常好的可折叠面板选项

另一个很好的选择是查看和组件

样本

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            collapsible: true
        });
    });
</script>
<div id="accordion">
    <h3><a href="#">File Upload</a></h3>
    <div>
       CONTENT HERE
    </div>
</div>

$（函数（）{
$（“手风琴”）。手风琴({
可折叠：正确
});
});
满足于此

这个问题很模糊，但不管你的实际目标是什么，你都可以通过在目标div上切换一个类并让CSS实现效果来实现。这比直接使用JS更改样式要好得多，因为它将样式设置的关注点与样式设置层分离，并且使用伞形类，您可以在一个点上使用附加属性廉价地修改效果

现在，您实际需要的CSS可以是

可见性：隐藏

（如果您希望保留布局流）或

显示：无
（如果您希望折叠布局），或者如果您希望实现灰显效果，甚至可以是像更改不透明度或颜色之类的异国情调

最后，在JS中启用此功能可以通过添加或替换
元素.className
属性的内容轻松完成，但实际上，利用jquery或mootools之类的库可以大大提高效果，这些库将为您提供大部分已经包装到小部件中的工作，以及动画淡入等细节

不要落入使用JS创造效果的维护陷阱，也不要落入重新发明轮子的陷阱，因为那里已经免费存在令人惊叹的银边品种。
这个问题很模糊，但是无论您的实际目标是什么，您都可以通过在目标div上切换一个类并让您的CSS实现该效果来实现效果。这比直接使用JS更改样式要好得多，因为它将样式设置的关注点与样式设置层分离，并且使用伞形类，您可以在一个点上使用附加属性廉价地修改效果

现在，您实际需要的CSS可以是
可见性：隐藏
（如果您希望保留布局流）或
显示：无
（如果您希望折叠布局），或者如果您希望实现灰显效果，甚至可以是像更改不透明度或颜色之类的异国情调

最后，在JS中启用此功能可以通过添加或替换
元素.className
属性的内容轻松完成，但实际上，利用jquery或mootools之类的库可以大大提高效果，这些库将为您提供大部分已经包装到小部件中的工作，以及动画淡入等细节

不要落入使用JS创建效果的维护陷阱，也不要落入重新发明轮子的陷阱，因为那里已经免费存在令人惊叹的银边品种。
要使用jquery隐藏和显示您的div，您可以执行以下操作：
<script src="js/jquery.js"></script>
<script>
   $j(document).ready(function(){

      $("#hide").click(function(){
           $("#uploadDiv").hide();    //hide the div 
      });

      $("#show").click(function(){
       $("#uploadDiv").show();    //show the div
      });

      $("#toggle").click(function(){
       $("#uploadDiv").toggle();  //toggle the div 
      });
   });
</script>

<div id="uploadDiv">Some text here !</div>
<div id="hide">Hide</div>         
<div id="show">Show</div>
<div id="toggle">toggle</div>