Javascript-how to correctly highlight the current navigation in the template inheritance? (Online ...)

Secret template. How can I access other pages...

In contrast to this kind of navigation, I used thinkphp to define a base.html file, which contains a general header,Nav navigationAccording to the footerbase, the corresponding HTML file will inherit the base.html template.

• How can I highlight the corresponding navigation of the current page when I access other pages?

• For example, how do I highlight the corresponding navigation of the current page when I access the actual page?

• When I access the lower-level navigation of the corresponding primary navigation, how do I correctly highlight the primary navigation on the subnavigation of the corresponding page?

Online and so on. I hope you can give me some advice.

Reply content:

In contrast to this kind of navigation, I used thinkphp to define a base.html file, which contains a general header,Nav navigationAccording to the footerbase, the corresponding HTML file will inherit the base.html template.

• How can I highlight the corresponding navigation of the current page when I access other pages?

• For example, how do I highlight the corresponding navigation of the current page when I access the actual page?

• When I access the lower-level navigation of the corresponding primary navigation, how do I correctly highlight the primary navigation on the subnavigation of the corresponding page?

Online and so on. I hope you can give me some advice.

This seems to belong to js control, and the owner has also performed the nav navigation. thinkphp uses its label, If you do not know how to import it, it will not work, because it will be included in the entrance file by default, and you will need to use it.

After loading the page, determine the currenturl, Whether it isheader.htmlInaLabelhrefStart,

For example, the currenturl:xxx.com/home/xxxx => a href="xxx.com/home", Add after matchingclass activeHighlight

It is because the same layout page needs to contain different pages and you do not know how to display the navigation of each page?

For JavaScript, you can start with the url, analyze the url rules, and then highlight the menu.

If PHP is used, the url or controller method can both be used. if it is highlighted, it can be implemented in combination with js or css.

In general, you need to remember that, based on the different access forms, you can split them apart, make judgments, and then highlight them.

Method 1: JavaScript can be used for control. js is written on every page containing this base, and ES6 is useless for your convenience.

var nav = Array.prototype.slice.call(document.querySelectorAll('#nav a'));var currentPath = location.pathname;nav.forEach(function(a) {    if(a.pathname === currentPath) a.classList.add('active');});

Method 2: use php. The idea is the same. get the url of the current request page and match the path. However, php does not need to be used for more than a year. I forgot to write it ....

Individuals are generally in _ initialize:

$this->assign("cur_nav","home");

Class = "active"> Decoration company
Class = "active"> Decoration bidding

This is similar to this, and then judge the value of curr_nav in the template.
If the navigation is simple, it can be determined directly through the module, controller, and Operation combination.
Js can also determine that the page will be inactive!