Jquery Div滑动和向下滑动问题
我是jquery slideUp和slideDown属性。有两个div我用两个href链接。单击登录和注册按钮后，相应的div应向上和向下滑动。但是，当点击注册按钮时，它会在登录框滑动之前在登录框上向上滑动，反之亦然。有谁能帮我避免一个div滑到另一个div上 下面是代码Jquery Div滑动和向下滑动问题,jquery,css,slidedown,slideup,Jquery,Css,Slidedown,Slideup,我是jquery slideUp和slideDown属性。有两个div我用两个href链接。单击登录和注册按钮后，相应的div应向上和向下滑动。但是，当点击注册按钮时，它会在登录框滑动之前在登录框上向上滑动，反之亦然。有谁能帮我避免一个div滑到另一个div上 下面是代码 <!DOCTYPE html> <html> <head> <style type='text/css'> body
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body
{
background-color:#000;
}
#container
{
margin-top:10%;
margin-left: auto;
margin-right:auto;
<!--margin-right: 200px;-->
border-style: none;
width:350px;
}
#tabbox
{
height:40px;
border-style:none;
}
#panel
{
height:300px;
border-style:none;
background-color:#FFF;
border-radius: 10px;
box-shadow:8px 8px 5px #B8B894;
}
.tab
{
background:#dedede;
display:block;
height:40px;
line-height:40px;
text-align:center;
width: 80px;
float: right;
font-weight:bold;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-moz-border-radius: 4px 4px 0px 0px;
}
a
{
color: #000;
margin: 0;
padding: 0;
text-decoration: none;
}
.signup
{
margin-left:8px;
margin-right:7px;
<!--box-shadow: 4px 4px 3px #888888;-->
}
.select
{
background-color:#EBFFF5;
<!--box-shadow: 4px 4px 3px #888888;#CCE680-->
}
#loginbox
{
min-height:200px;
margin-left:30px;
padding:10px;
padding-top:70px;
}
#signupbox
{
display:none;
min-height:200px;
padding:5px;
margin-left:30px;
padding-top:90px;
}
#loginEmail
{
background-image:url('user.png');
background-repeat:no-repeat;
padding-left:30px;
border-radius: 10px;
border-color: #668566;
box-shadow: 8px 8px 5px #888888;
height:25px;
width:70%;
}
#loginPwd
{
background-image:url('key1.png');
background-repeat:no-repeat;
padding-left:30px;
border-radius: 10px;
border-color: #668566;
box-shadow: 8px 8px 5px #888888;
height:25px;
width:70%;
}
#submit
{
height:30px;
width:30%;
box-shadow: 8px 8px 5px #888888;
border-radius: 9px;
background-color: #99D6AD;
font-weight: bold;
}
p
{
font-family: "Times New Roman", Times;
font-size:30px;
}
#signupemail
{
background-repeat:no-repeat;
padding-left:30px;
border-radius: 10px;
border-color: #668566;
box-shadow: 8px 8px 5px #888888;
height:25px;
width:70%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".tab").click(function()
{
var X=$(this).attr('id');
if(X=='login')
{
$("#signup").removeClass('select');
$("#login").addClass('select');
$("#signupbox").slideUp();
$("#loginbox").slideDown();
}
else
{
$("#login").removeClass('select');
$("#signup").addClass('select');
$("#signupbox").slideDown();
$("#loginbox").slideUp();
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="tabbox">
<a href="#" id="signup" class="tab signup">SignUp<a>
<a href="#" id="login" class="tab select">Login<a>
</div>
<div id="panel">
<div id="loginbox">
<br>
<input type="email" name="loginEmail" id="loginEmail" placeholder="Email"/>
<br>
<br>
<input type="password" name="loginPwd" id="loginPwd" placeholder="Password"/>
<br>
<br>
<input type="submit" name="submit" id="submit" value="Login">
</div>
<div id="signupbox">
<input type="email" name="loginEmail" id="signupemail" placeholder="Enter Email"/>
<br>
<br>
<input type="submit" name="submit" id="submit" value="Send Mail">
</div>
</div>
</div>
</body>
</html
身体
{
背景色：#000；
}
#容器
{
利润率最高：10%；
左边距：自动；
右边距：自动；
边框样式：无；
宽度：350px；
}
#标签盒
{
高度：40px；
边框样式：无；
}
#面板
{
高度：300px；
边框样式：无；
背景色：#FFF；
边界半径：10px；
盒影：8px 8px 5px#B8B894；
}
.标签
{
背景：#dedede；
显示：块；
高度：40px；
线高：40px；
文本对齐：居中；
宽度：80px；
浮动：对；
字体大小：粗体；
-webkit边框左上半径：3px；
-webkit边框右上角半径：3px；
-moz边界半径：4px4px0px 0px；
}
A.
{
颜色：#000；
保证金：0；
填充：0；
文字装饰：无；
}
.注册
{
左边距：8px；
右边距：7px；
}
.选择
{
背景色：#EBFFF5；
}
#登录箱
{
最小高度：200px；
左边距：30px；
填充：10px；
填充顶部：70px；
}
#签名盒
{
显示：无；
最小高度：200px；
填充物：5px；
左边距：30px；
填充顶部：90px；
}
#罗吉内梅尔酒店
{
背景图片：url（'user.png'）；
背景重复：无重复；
左侧填充：30px；
边界半径：10px；
边框颜色：#668566；
盒影：8px 8px 5px#8888888；
高度：25px；
宽度：70%；
}
#loginPwd
{
背景图片：url（'key1.png'）；
背景重复：无重复；
左侧填充：30px；
边界半径：10px；
边框颜色：#668566；
盒影：8px 8px 5px#8888888；
高度：25px；
宽度：70%；
}
#提交
{
高度：30px；
宽度：30%；
盒影：8px 8px 5px#8888888；
边界半径：9px；
背景色：#99D6AD；
字体大小：粗体；
}
P
{
字体系列：《泰晤士报》、《新罗马》、《泰晤士报》；
字体大小：30px；
}
#注册电子邮件
{
背景重复：无重复；
左侧填充：30px；
边界半径：10px；
边框颜色：#668566；
盒影：8px 8px 5px#8888888；
高度：25px；
宽度：70%；
}
$（文档）.ready（函数（）
{
$（“.tab”）。单击（函数（）
{
var X=$（this.attr（'id'）；
如果（X=='login'）
{
$（“#注册”）.removeClass（'select'）；
$（“#login”）.addClass（'select'）；
$（“#签名框”）.slideUp（）；
$（“#登录框”）.slideDown（）；
}
其他的
{
$（“#登录”）.removeClass（'select'）；
$（“#注册”）.addClass（'select'）；
$（“#签名框”）.slideDown（）；
$（“#登录框”）.slideUp（）；
}
});
});
报名
登录
使用回调方法向下滑动和向上滑动jquery方法。检查此URL是否正确发送。我用“显示和隐藏”属性代替了“上下滑动”来解决您的问题？？好的，很好。回调函数还可以使用slideup/sldiedownYa解决您的问题，这样就解决了。。谢谢你的帮助。。