【CSS】在点击nav后，用JS加上颜色，怎么在页面跳转后仍能保持改变后的颜色？

图片描述

导航每个页面都是通过后台标签链接的同一个段HTML，我在点击导航后，通过js加上改变颜色，但是点击跳转到能一个页面，js改后的颜色就失效了，请问这种问题怎么解决？

回答：

我自己来回答吧，不用你们写的那么复杂,每个页面加入一段CSS

方法一：

//首页
ul li a:nth-child(1){
            color: #FF0000;
        }
//品牌介绍
ul li a:nth-child(2){
            color: #FF0000;
        }
//招牌美食
ul li a:nth-child(3){
    .........
}

方法二：

 $(function() {
    var pageUrl = window.location.href;
    var aArray = $("ul>li>a");
    for (var i = 1; i < aArray.length; i++) {
        //高亮首页栏目
        if (pageUrl == aArray[0].href) {
            $(aArray[0]).addClass("active");
        }
        //高亮当前栏目，如果为子栏目时，则匹配 href 亮父栏目
        else if (pageUrl.substring(0, aArray[i].href.length) == aArray[i].href) {
            $(aArray[i]).addClass("active");
        }
    }
})

回答：

保存个屁噢，我从导航栏进了a页面，关掉，再从地址栏进入b页面，这时候你还给我高亮a页面么？
写个所有页面公用的解析函数，直接用nav的地址去和href匹配

回答：

说一下思路，在每个页面加上js判断

假设跳转之后页面的地址是http://********/zhaoshang.html
if(/zhaoshang/.test(window.location.pathname)){
招商加盟.style.color="红色"
}else if(){
...
}

回答：

几个办法：

  1. 导航栏自己一个iframe；

  2. 用sessionStorage / localStorage 保存状态；

  3. 跳转页面带URL参数&active =xxx；

  4. 用spa 不真的跳转页面；
    看答主的题目，估计2、3比较合适

回答：

没必要用到JS 直接用css 类名就好了 每一个nav 加上一个类名，放到这个nav的css文件中

<nav>
    <a class="index-active">首页</a>
    <a class="details-active">详情页</a>
 </nav>
 在 index.css 中 写 
     .idnex-active {...}
 在 detail.css 中 写 
     .detail-active {...}

回答：

保存在本地啊

回答：

后台可以做判断，当前页面是哪个然后加类，这个比较方便。

回答：

保存本地，再次进入页面时，读取缓存，进行判断

回答：

把状态保存到cookie吧。

保存到session也行，不过这需要后端开发配合。

回答：

给li的class加一个active,设置active的字体颜色，动态给各个li添加class!

回答：

这是个什么鬼需求？？反人类

回答：

可以使用cookie或者session

srssion储存：

localStorage.setItem('className', className)

读取：

var className = localStorage.getItem('className');

以上是 【CSS】在点击nav后，用JS加上颜色，怎么在页面跳转后仍能保持改变后的颜色？ 的全部内容， 来源链接： utcz.com/a/154187.html

回到顶部