css设置的颜色，在添加jquery后，没有显示了。
css中对“快速登录”设置了灰色。但是添加了点击事件后，“快速登录”设置的灰色不起作用了。麻烦老师帮忙看下。谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>LoginTraining</title>
<link rel="stylesheet" href="css/test1.css">
</head>
<body>
<div class="main">
<div class="login">
<div class="login_header">
<a href="javascript:void(0);" id="fast_login" class="fast_login">快速登录</a>
<a href="javascript:void(0);" id="psw_login" class="psw_login">账号密码登录</a>
</div>
<div class="login_page1">
<div class="img_page">
暂无
</div>
</div>
<div class="login_page2">
<form action="">
<input type="text" placeholder="支持QQ号/邮箱/手机号登录"><br>
<input type="password" placeholder="登录密码"><br>
<div></div>
<input type="button" value="登录" class="button">
</form>
<div class="bottom_tips">
<a href="">忘了密码？</a>
<span>|</span>
<a href="">注册新账号</a>
<span>|</span>
<a href="">意见反馈</a>
</div>
</div>
</div>
</div>
<script src="js/1.12.4.js"></script>
<script src="js/test1.js"></script>
</body>
</html>
-------------------------------------------------------------
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
background-color: #999;
}
.main{
width: 15%;
height: 35%;
min-width: 270px;
min-height: 330px;
text-align: center;
background-color: #fff;
}
.login{
width: 100%;
height: 100%;
position: relative;
}
.login_header{
width: 100%;
height: 60px;
background-color: #000;
color: #fff;
}
a{
cursor: pointer;
}
.login_header a{
text-decoration: none;
color: #fff;
display: inline-block;
height: 60px;
line-height: 60px;
margin:0 20px;
}
.fast_login{
color: #666;
}
.psw_login{
font-weight: bold;
}
.login_page1{
display: none;
}
.login_page2{
margin-top: 40px;
}
input{
width: 80%;
height: 30px;
margin-bottom: 15px;
}
.button{
background-color: #000;
color: #fff;
border-radius: 5px;
border: none;
}
.bottom_tips{
position: absolute;
bottom: 20px;
right: 20px;
}
.bottom_tips a{
font-size: 12px;
color: #000;
text-decoration: none;
}
.bottom_tips span{
color: #666;
}
------------------------------------------------
$(function(){
var fastLogin=$('#fast_login'),
pswLogin=$('.psw_login'),
loginPage1=$('.login_page1'),
loginPage2=$('.login_page2');
console.log(loginPage1)
pswLogin.click(function(){
fastLogin.css({
color:'#666',
fontWeight:'normal'
});
pswLogin.css({
color:'#fff',
fontWeight:'bold'
});
loginPage1.hide();
loginPage2.show();
})
fastLogin.click(function(){
pswLogin.css({
color:'#666',
fontWeight:'normal'
});
fastLogin.css({
color:'#fff',
fontWeight:'bold'
})
loginPage1.show();
loginPage2.hide();
})
})
慕九州_HeMoon1回答
-
慕九州_HeMoon
哎呀，不好意思。是我css设置有问题。问题已经解决。
随时随地看视频慕课网APP
Html/CSS
CSS3
JQuery