javascript - 在点击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;
    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 (String(pageUrl).substring(0, aArray[i].href.length) == aArray[i].href) {
            $(aArray[i]).addClass("active");
        }
    }
})

这篇关于javascript - 在点击nav后，用JS加上颜色，怎么在页面跳转后仍能保持改变后的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！