通常情况下，我们的导航右侧显示内容要根据登录状态改变，例如：未登录则显示登录注册，登录后则显示欢迎***，实现方法有很多种，可以前端实现，也可以后端实现，前端实现的方法也很多，session，cookie，或者直接用jquery的插件，比如cookie.js；

作为一个前端小白，尽量自己解决，多写就会多学到东西的呀！下面是我通过百度，总结的方法，很简单，希望能够一起分享！

cookie方法：

注：因为怕大家看不懂，不知道到底复制了代码之后放到自己的哪个文件下，我粘的代码比较详细，你们需要的看，不需要的直接过滤就好。你们复制红色部分就可以啦！

① 我是用ajax调用接口进行登录，登录成功时，创建一个cookie！     $('#j-login-btn').click(function(userName,passWord){         var userName = $('#j-pwd-tel').val();         var passWord = $('#j-pwd').val();         var type = 1;         if(userName == '手机号') {             $("#msgphone").text("手机号不能为空！")             return false;         } else {             if(passWord == '密码') {                 $("#msgpsw").text("密码不能为空！")                 return false;             } else {                 $.ajax({                     type: "post",                     url: 'http://brace.hxwomi.com/web/user/login',                     data: {                         "info": "{\"username\":\"" + userName + "\",\"passwordOrSms\":\"" + passWord + "\",\"type\":\"1\"}"                     },                     success: function(data) {                         console.log(data);                         if(data.code == "200") {                             location.href = 'index.html';                                                         //增加的保存cookie代码                             var exp = new Date();                             exp.setTime(exp.getTime() + 60 * 1000 * 60 * 24); //24小时                             document.cookie = "userName=" + userName + ";expires=" + exp.toGMTString();                             document.cookie = "passWord=" + passWord + ";expires=" + exp.toGMTString();                             //新增结束                         } else {                             $("#msgpsw").html("手机号或密码错误！")                         }                     },                     error: function() {                         alert("网络错误");                     }                 })

            }         }

    })

②获取cookie信息（比如我在首页要判断是否登录，然后修改导航样式，那就粘贴以下代码放到首页） <script>            function getCookie(name) {                 var strCookie = document.cookie;                 var arrCookie = strCookie.split("; ");                 for (var i = 0; i < arrCookie.length; i++) {                     var arr = arrCookie[i].split("=");                     if (arr[0] == name)                         return arr[1];                 }                 return "";             }

            var islogin = getCookie("userName");             if(islogin!==''){                 $("#loginbf").hide();                 $("#loginaf").show();             }else{                 $("#loginbf").show();                 $("#loginaf").hide();             }         </script>

这里我的导航写了两种样式，一种id为loginbf，一种为loginaf,通过显示隐藏来实现样式的改变，你们也可以通过增加类名来改变样式。这就是最普通的jquery，就不多说啦。

此时导航的改变已经实现啦！！！！

 

如果想实现点击导航，比如我的课程按钮（id=myclass），需要先登录，登录后才可以进入我的课程页面，实现如下：

//我的课程是否登录验证     $("#myclass").click(function(){         var islogin01=getCookie("userName");         if(islogin01!==''){             location.href='mycourse.html'         }else{             alert("您还没有登录哦！立即登录！");             location.href='login.html';         }     })

此时，如果未登录，就会跳转到登录页面，登录成功后，我写的是跳转到首页，大家按照需要自己写！

 

最后，登出后，要清空cookie！

function exitLogin() {         document.cookie = "userName=";         document.cookie = "passWord=";         window.location.reload(true);     }

当你登出成功后调用该方法即可！代码如下：

//登出    $('#logout').click(function(){         $.ajax({             type: "post",             url: 'http://brace.hxwomi.com/web/user/logout',             success: function(data) {                 console.log(data.code);                 if(data.code == "200") {                     exitLogin();                    location.href = 'index.html';                                     } else {                     alert(data.msg)                 }             },             error: function() {                 alert("网络错误");             }         })     })

 

 

我项目用到的暂时就这么多，希望如果对你有帮助啦。前端小白，一起加油！