网页设计,在同一个页面可以展开并合并的输入框怎么做?

发布网友发布时间：2024-05-09 15:05

共2个回答

热心网友时间：2024-05-14 03:12

用javascript 但如果你只是偶尔用一下javascript不想深入学习。那还是用
现在比较流行的一个javascript框架jquer吧，它能简化javascript操作。
学起来容易，最重要一点是它在各主流浏览器之间兼容性好。

jquery在网上教虽然多，但也很杂，这里给你推荐一个设计前沿的视频教程：
http://learning.artech.cn/20080621.mastering-javascript-jquery.html

接下来我用jquery给你解决这个问题：

首先下载jquery框架（网上多得是）

然后调jquery
<script type="text/javascript" src="../js/jquery-1.4.2.min.js">
</script>
然后加几行css
<style type="text/css">
.hide{
display:none; / *用来在显示和隐藏之间切换的* /
}
#main{
width:300px;
height:auto;
border:1px #669933 solid;
}
#main_top{
width:300px;
height:30px;
order:1px #669933 solid;
}
#main_bottom{
width:300px;
height:250px;
border:1px #669933 solid;

}
</style>

body部分:
<body>
<div id="main">
<div id="main_top">
这里是显示/隐藏切换钮
</div>
<div id="main_bottom">
</div>
</div>
</body>

好了，然后写用jquery做显示隐藏部分的代码：

<script type="text/javascript">
$(document).ready(function() {
$("#main_top").click(function(){
$("#main_bottom").toggleClass("hide");
});
});
</script>

这样就搞定了，然后自己扩展一下。那个向上箭头，设置为main_top的背景就好了

热心网友时间：2024-05-14 03:13

用js做的比如说
<html>
<head><title>展开和合并</title></head>
<script language="javascript" type="text/javascript">
function change(){
var tt=document.getElementById("maindiv");
if(tt.style.display=="block"){
tt.style.display="none";
}else{
tt.style.display="block";
}
}
</script>
<body>
<div><a href="javascript:;" onclick="change();">改变</a></div>
<div id="maindiv" style="display:block"><textarea cols="40" rows="10"></textarea></div>
</body>
</html>
id="maindiv"这个输入框有个属性style="display:block"，这个是显示的，如果为style="display:none",就隐藏了，所以要通过js动态改变，而<a href="javascript:;" onclick="change();">改变</a>是一个连接，通过onclick="change();">点击事件来动态改变style="display:block"，
var tt=document.getElementById("maindiv");是用来通过id取得元素，这个就是输入框，然后判断输入框的display(tt.style.display）若为block(显示)则变为none（隐藏），若为none(隐藏)则变为block(显示)，这个过程是通过javascript(又叫js)的dom编程实现的。

参考：http://jordonike.com
http://discount-outletonline.com