通常情况下，我们的导航右侧显示内容要根据登录状态改变，例如：未登录则显示登录注册，登录后则显示欢迎***，实现方法有很多种，可以前端实现，也可以后端实现，前端实现的方法也很多，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("网络错误");
            }
        })
    })

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