<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("select#choosebook").change(function(){
$(".title").slideDown("medium");
});
</head>
<body>
<div class="booktitle">
<p>
<font color="red">*</font>Book:
<select id="choosebook">
<option>Choose a Book...</option>
<option>Add new Book...</option>
</select>
<div class="title" style="display:none">**
<font color="red">*</font>Title: <input type="text">
</div>
<font color="red">*</font>Page: <input type="text" class="page">
</div>
</body>
</html>
The div with class "title" still takes up space between the "Book:" input and the "Page:" input, even though it's hidden! Other divs on this web page don't. How can I make it take up no space until the javascript is activated to slide it down?
具有类“title”的div仍然占据了“Book:”输入和“Page:”输入之间的空间,尽管它是隐藏的!这个网页上的其他女歌手则不然。如何让它在javascript被激活之前不占用任何空间?
Thank you!
谢谢你!
EDIT: As requested, here is a screenshot of the problem. I'm trying to get rid of the gap between the Book input and the Title input. Before the 'title' input slides down: After the 'title' input slides down:
编辑:按要求,这是问题的截图。我正在努力消除书本输入和标题输入之间的差距。在“标题”输入下滑前:在“标题”输入下滑后:
And here is my CSS:
这是我的CSS:
<style type="text/css">
@import url("layout.css");
.page {
width: 50px;
}
.URL, .booktitle {
margin-left: 24px;
display:none;
}
.title {
display: none;
}
.newtag {
display:none;
}
.amount, .addtag {
width: 100px;
}
.details {
width: 275px;
}
</style>
3 个解决方案
#1
1
If you are talking about the huge space under the Book drop down then that is because of the p
tag that you have open in the HTML but forgot to close it. The p
tag is adding the default margin. Hence the space. Remove the p
tag and the margin should go away.
如果你说的是书下面的巨大空间,那是因为你在HTML中打开的p标签,但是忘了关闭它。p标签添加了默认的边距。因此,空间。去掉p标签,空白就会消失。
Also as I mentioned in the comments to your question always add a doctype
to you page.
同样,正如我在您的问题的评论中提到的,总是向您的页面添加doctype。
#2
7
It's not the div that's creating the space, it's the <br>
you have right after it.
创建空间的不是div,而是后面的
。
And please, get rid of the <font>
tags. My eyes are bleeding.
请去掉标签。我的眼睛流血。
#3
0
The font element is deprecated, use span here. You did not close your script element.
字体元素被弃用,在这里使用span。您没有关闭脚本元素。
I cleaned up a bit and now you got this:
我清理了一下,现在你看到了:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("select#choosebook").change(function(){
$(".title").slideDown("medium");
});
</script>
</head>
<body>
<div class="booktitle">
<span style="color:red">*</span>Book:
<select id="choosebook">
<option>Choose a Book...</option>
<option>Add new Book...</option>
</select>
<div class="title" style="display:none">
<span style="color:red">*</span>
Title: <input type="text" />
</div>
<span style="color:red">*</span>
Page: <input type="text" class="page">
</div>
</body>
</html>
You can see the fiddle here: http://jsfiddle.net/Allan/cJ6Jq/ works for me.
您可以在这里看到小提琴:http://jsfiddle.net/Allan/cJ6Jq/为我工作。
#1
1
If you are talking about the huge space under the Book drop down then that is because of the p
tag that you have open in the HTML but forgot to close it. The p
tag is adding the default margin. Hence the space. Remove the p
tag and the margin should go away.
如果你说的是书下面的巨大空间,那是因为你在HTML中打开的p标签,但是忘了关闭它。p标签添加了默认的边距。因此,空间。去掉p标签,空白就会消失。
Also as I mentioned in the comments to your question always add a doctype
to you page.
同样,正如我在您的问题的评论中提到的,总是向您的页面添加doctype。
#2
7
It's not the div that's creating the space, it's the <br>
you have right after it.
创建空间的不是div,而是后面的
。
And please, get rid of the <font>
tags. My eyes are bleeding.
请去掉标签。我的眼睛流血。
#3
0
The font element is deprecated, use span here. You did not close your script element.
字体元素被弃用,在这里使用span。您没有关闭脚本元素。
I cleaned up a bit and now you got this:
我清理了一下,现在你看到了:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("select#choosebook").change(function(){
$(".title").slideDown("medium");
});
</script>
</head>
<body>
<div class="booktitle">
<span style="color:red">*</span>Book:
<select id="choosebook">
<option>Choose a Book...</option>
<option>Add new Book...</option>
</select>
<div class="title" style="display:none">
<span style="color:red">*</span>
Title: <input type="text" />
</div>
<span style="color:red">*</span>
Page: <input type="text" class="page">
</div>
</body>
</html>
You can see the fiddle here: http://jsfiddle.net/Allan/cJ6Jq/ works for me.
您可以在这里看到小提琴:http://jsfiddle.net/Allan/cJ6Jq/为我工作。