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){
    .........
}

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

Tell me the idea and add js judgment to each page

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

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

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

}else if(){
...
}

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

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 {...} 

Save it locally

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

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

Save status to cookie.

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

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