前端js控制点击切换效果且刷新浏览器不会重置

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

原生js实现点击切换样式效果，且刷新浏览器不会丢失当前数据，由于是完成后靠记忆写的博文，可能会有遗漏

一、布局的部分代码和样式

  <div class="nav-flex-center">
                    <a href="" class="nav-flex-center-a">
                        <div class="nav-icon">
                             <span class="iconfont icon-home">span> 
                        div>
                    a>
                    <a href="" class="nav-flex-center-a">
                        <div class="nav-icon">
                             <span class="iconfont icon-shipin">span> 
                        div>
                    a>  
                    <a href=""class="nav-flex-center-a">
                        <div class="nav-icon">
                             <span class="iconfont icon-huo">span> 
                        div>
                    a>  
                    <a href=""class="nav-flex-center-a">
                        <div class="nav-icon">
                             <span class="iconfont icon-duanxin ">span> 
                        div>
                    a>  
                    <a href=""class="nav-flex-center-a">
                        <div class="nav-icon">
                             <span class="iconfont icon-renyuan">span> 
                        div>
                    a>   
                div>

样式

.nav-flex-center{
    flex: 1;
    padding:0 80px 0 80px ;
    // background-color:salmon;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .nav-flex-center-a{
        text-decoration: none;
        height: 56px;
        .nav-icon{
            width: 80px;
            height: 54px;
            line-height: 56px;
            margin: auto;
            text-align: center;
            color:#000;
            //点击时
            &:hover{
                background-color: #f2f2f2;

            }
            span{
                font-size: 30px;
                font-weight: 600; 
            }
        }
    }
    // 这里应该通过js加
    // .nav-flex-center-a:nth-child(3)  .nav-icon{
    //     .nav-icon-active
    // }
}

把注释打开的效果为

悬浮会有背景颜色改变

下方样式是点击时应该加上的active样式

.nav-icon-active{
    color: #ff8200 !important; 
    border-bottom: 2px solid #ff5900;
}

二、使用js来控制点击时颜色变化，点击哪一个图标，哪一个图标就应该变橙色且带有下边框

1.分析流程及思路

首先最开始打开浏览器，打开这个网站时应该是默认的第三个图标变为橙色
所以在最开始应该给第三个图标设置avtive样式，然后再点击其它图标时，为其它图标加上激活样式，并去除当前的闪亮图标的样式
同时也要判断点击的图标如果是当前闪亮图标即不移除样式

这就基本实现了切换样式的功能

但是我们会发现在浏览器进行刷新的时候，即使你现在的闪亮图标是第1个图标，整个界面也会初始化从而变成第3个图标闪亮，

2.为什么要有刷新浏览器闪亮图标不变的需求？

是因为，一个网站它可能是由多个页面进行组成，
而单页面网站是由多个路由，来控制内容的显示的，
在登录情况下刷新当前网页时，不应该是跑到路由的根目录去访问，而是刷新的当前页面
当然在未登录情况下可以进行判断，跳转到登录界面

所以前面的思路又会有更新

3.依靠sessionStroage的浏览器未关闭，不会消失的特性来存储相关数据

4. 整体实现

$(function(){
    // 顶部fixed 中切换的效果
    const navicon=$(".nav-icon")
    // 浏览器第一次进入网页判断有无 navid，没有就默认是第二个位置并加上类名
    var navId= sessionStorage.getItem("navid")?sessionStorage.getItem("navid"):2;
    navicon[navId].classList.add("nav-icon-active");
    // 为刷新浏览器，不是关闭浏览器做准备，设置session 
    // sessionStorage.setItem("navid",navId)
    for(let i=0;i<navicon.length;i++){
        navicon[i].onclick=function(e){    
        navicon[i].classList.add("nav-icon-active");
        e.preventDefault();
        // 判断点击的是不是现在呈现的元素
        if(i!=navId)
        {
            navicon[navId].classList.remove("nav-icon-active")
        }
        navId=i
        // 每一次点击更新存储的navid
        sessionStorage.setItem("navid",i)
    }}
    }