我正在设计一个网页,其中我在某些时候受到了打击。
我在div中使用3个上传按钮,让div的id为“uploadDiv” 我有一个右箭头和向下箭头图像 如果我点击向下箭头图像,应显示“uploadDiv”的内容 如果我点击右箭头图像,应隐藏“uploadDiv”的内容
图像应该在同一个地方。
如果有任何机构知道解决方案,请告诉我。 提前谢谢。
的问候, Kiran Kumar。
答案 0 :(得分:3)
听起来你在谈论某种形式的可折叠面板。根据源代码底层架构的不同,Microsoft的Ajax Control Toolkit有一个非常好的可折叠面板选项。
另一个很好的选择是查看jQuery和jQuery UI组件。
<强>样品强>
<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
答案 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。