隐藏一个div

时间:2009-07-10 05:53:23

标签: javascript css

我正在设计一个网页,其中我在某些时候受到了打击。

我在div中使用3个上传按钮,让div的id为“uploadDiv” 我有一个右箭头和向下箭头图像 如果我点击向下箭头图像,应显示“uploadDiv”的内容 如果我点击右箭头图像,应隐藏“uploadDiv”的内容

图像应该在同一个地方。

如果有任何机构知道解决方案,请告诉我。 提前谢谢。

的问候, Kiran Kumar。

7 个答案:

答案 0 :(得分:3)

听起来你在谈论某种形式的可折叠面板。根据源代码底层架构的不同,Microsoft的Ajax Control Toolkit有一个非常好的可折叠面板选项。

另一个很好的选择是查看jQueryjQuery UI组件。

  1. http://jqueryui.com/demos/accordion/
  2. http://jqueryui.com/demos/accordion/#collapsible
  3. <强>样品

    <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>
    

答案 1 :(得分:2)

问题很模糊,但不管你的实际目标是什么,你都可以通过在你的目标div上切换一个类并让你的CSS实现效果来达到效果。这远远超过直接使用JS改变样式,因为它将样式的关注区分为样式层,而使用伞形类,这可以让您在一个点上以额外的属性廉价地修改效果。 / p>

现在你真正想要的CSS可能是visibility: hidden(如果你想保留布局流程)或display: none(如果你想让布局崩溃),或者甚至是异乎寻常的东西,比如改变不透明度或颜色,如果你想达到灰色效果。

最后在JS中启用此功能可以通过附加或替换element.className属性的内容轻松完成,但实际上可以通过利用像jquery或mootools这样的库来提高效率,这将为您提供大部分工作已经包装成小部件和动画褪色等细节。

不要陷入使用JS创造效果的维护陷阱,也不要陷入重新发明轮子的陷阱,在那里已经免费提供令人惊叹的银色镶边品种。

答案 2 :(得分:1)

<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('uploadDiv').style.visibility = 'hidden';
}
else {
if (document.uploadDiv) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.uploadDiv.style.visibility = 'hidden';
}
}
}

function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('uploadDiv').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.uploadDiv.visibility = 'visible';
}
else { // IE 4
document.all.uploadDiv.style.visibility = 'visible';
}
}
}
</script> 

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

<img src="right.png" onclick="hidediv()" />
<img src="down.png" onclick="showdiv()" />

使用onclick事件调用所需的隐藏或显示div

取自http://www.webmasterworld.com/forum91/441.htm

答案 3 :(得分:1)

使用JQuery,您可以轻松完成。 您可以下载Here jquery.js文件。

JS:

<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>

HTML:

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

单击特定div以执行所需操作。

答案 4 :(得分:0)

在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'" ....

答案 5 :(得分:0)

使用jquery隐藏和显示你的div你可以做类似的事情:

 <head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("#downArr").click(function () {
      $("#uploadDiv").toggle();
      $("#downArr").toggle();
          $("#upArr").toggle();
    });

        $("#upArr").click(function () {
      $("#uploadDiv").toggle();
      $("#downArr").toggle();
          $("#upArr").toggle();
    });

  });
  </script>

</head>
<body>
        <img id="downArr" src="downArr.jpg">
        <img id="upArr" src="upArr.jpg" style="display:none;">

        <br>

    <div id="uploadDiv" style="display:none;">
        content
    </div>
</body>

单击图像downArr.jpg将使upArr.jpg和uploadDiv的内容可见

http://docs.jquery.com/Effects/toggle

查看更多关于切换功能的示例

-Fortes

答案 6 :(得分:-2)

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