javascript - After clicking nav, using JS to add color, how can the changed color be maintained after the page jumps?

Question

Each navigation page is the same piece of HTML linked through the background tag. After clicking the navigation, I change the color through js, but when I click to jump to a page, the color changed by js becomes invalid. How to solve this problem?

Answer 1

I’ll answer it myself. It doesn’t need to be as complicated as what you wrote. Just add a piece of CSS to each page

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

Answer 2

Save what the heck, I entered page a from the navigation bar, closed it, and then entered page b from the address bar. Will you highlight page a for me at this time?
Write a parsing function common to all pages, and directly use the nav address to match the href

Answer 3

Tell me the idea and add js judgment to each page

假设跳转之后页面的地址是http://********/zhaoshang.html

if(/zhaoshang/.test(window.location.pathname)){

招商加盟.style.color="红色"

}else if(){
...
}

Answer 4

A few ways:

1. The navigation bar has its own iframe;

2. Use sessionStorage / localStorage to save state;

3. Jump page with URL parameters&active =xxx;

4. Using spa does not really jump to the page;
   Looking at the answerer’s question, I guess 2 or 3 are more suitable

Answer 5

There is no need to use JS, just use the css class name. Add a class name to each nav and put it in the css file of this nav

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

Answer 6

Save it locally

Answer 7

The background can determine which page the current page is and then add a category. This is more convenient.

Answer 8

Save locally, and when you enter the page again, read the cache and make a judgment

Answer 9

Save status to cookie.

Save to session, but this requires the cooperation of back-end development.

Answer 10

Add active to the li class, set the font color of active, and dynamically add classes to each li!