Question

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

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

图像应该在同一个地方。

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

的问候， Kiran Kumar。

Answer 1

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

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

http://jqueryui.com/demos/accordion/
http://jqueryui.com/demos/accordion/#collapsible

<强>样品

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

Answer 2

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

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

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

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

Answer 3

<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

Answer 4

使用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以执行所需操作。

Answer 5

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

Answer 6

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

Answer 7

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

隐藏一个div

7 个答案: