javascript - How to correctly highlight the current navigation in template inheritance? (Waiting online...)

Similar to the navigation above, I used the principle of template inheritance to define a base.html file in thinkphp, which contains the general header, nav navigation, and footer bottom. Other html files will inherit this base.html template.

• How can I highlight the navigation corresponding to the current page when visiting other pages?

• As shown in the picture above, when I visit the actual page, how can I highlight the navigation corresponding to the current page, if the navigation is a multi-level navigation?

• When I visit the sub-navigation corresponding to the main navigation, how can I correctly highlight the main navigation on the sub-navigation of the corresponding page?

Waiting online, I hope all my friends can help me with my doubts.

Reply content:

Similar to the navigation above, I used the principle of template inheritance to define a base.html file in thinkphp, which contains the general header, nav navigation, and footer bottom. Other html files will inherit this base.html template.

• How can I highlight the navigation corresponding to the current page when visiting other pages?

• As shown in the picture above, when I visit the actual page, how can I highlight the navigation corresponding to the current page, if the navigation is a multi-level navigation?

• When I visit the sub-navigation corresponding to the main navigation, how can I correctly highlight the main navigation on the sub-navigation of the corresponding page?

Waiting online, I hope all my friends can help me with my doubts.

This seems to be controlled by js, and the author has also made nav navigation. Use its tag in thinkphp, try importing I don’t know if it will work, because it defaults to running the entry file and including it. Need to use it

After loading the page, determine whether the current url starts with the href of the a tag in header.html,

For example, the current url:xxx.com/home/xxxx => a href="xxx.com/home", add class activehighlight

after matching

You must be troubled because the same layout page needs to contain different pages and you don’t know how to display the navigation to which it belongs for each page?

If so, then in terms of js, you can start with the url, analyze the url rules, and then highlight the menu

For PHP, url or controller method can be used. It is also a judgment. For highlighting, it can be achieved with js or css

In general, what you need to remember is to peel it off according to the different access forms, judge it, and then highlight it.

Method 1, you can use js to control, write js in each page that contains this base, deliberately not using ES6, for your convenience.

<code>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');
});</code>

Method 2, use php. The idea is the same, get the URL of the currently requested page, and then match the path. However, I haven’t used the PHP set for more than a year, and I forgot how to write it. . . .

Individuals are usually in _initialize:

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

<code><li <eq name="cur_nav" value="company">class="active"</eq> ><a href="{:U('/clist')}">装修公司</a></li>
<li <eq name="cur_nav" value="demand">class="active"</eq> ><a href="{:U('/dlist')}">装修招标</a></li></code>

Similar to this, then determine the value of curr_nav in the template.
If the navigation is simple, you can judge it directly through the combination of modules, controllers, and operations.
JS can also judge, but it feels like the page will flicker uncomfortably!