现有一个提前做好的网页首页代码如下：
用一个服务器模型做个模拟
别克汇首页如下：
别克汇——首页.png
以京东上的一个登录小标为例
如果用户已经登录过，那么直接显示，***您好，欢迎使用别克汇，显示用户，并且有我的订单
如果没有登录，那么此刻需要登录，显示请登录
模拟ajax请求，先把首页和资源文件拷贝一下
（需要的话可以私我）
head部分如下：
<head>
<meta charset="UTF-8">
<title>登录小头像</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$.ajax({
url: 'js/data.json',
type: 'get',
dataType: 'json'
})
.done(function(data) {
if(data.code == 200){
$('#logout').addClass('show');//让它显示
$('#logout em').html(data.data.name);//获取李念，作为内容塞给标签
$('#login').addClass('hidden');//把未登录的隐藏
}
})
.fail(function() {
alert('连接超时！请重试');
});
</script>
</head>
这样请求就不会冲突了，这时候登录过只显示登录过的正常界面
<div id="def_head>
<img class="center-block img-circle" src="img/4.jpg" alt="头像">
</div>
<div id="usr_head">
<img class="center-block img-circle" src="img/4-4.jpg" alt="头像">
</div>
最后，因为这部分设置过登录还是未登录之后，京东狗的头像还是存在没有变过
所以，我们可以给他登录过的换一个头像，只需要给usr_head换一个头像
然后就大功告成了
over学起来
最后效果如图：
QQ浏览器截图20180920195817.png
网友评论