How to correctly highlight the current navigation in JavaScript-template inheritance? (online etc...) ）

Similar to the above navigation, I use the principle of its template inheritance in thinkphp to define a base.html file that contains the generic header header,nav navigation , footer bottom, Other HTML files will inherit the base.html template.

• How do I highlight the navigation of the current page when I visit other pages?

• For example, when I visit the actual combat page, how to highlight the current page corresponding navigation, if the navigation is multi-level navigation?

• How do I correctly highlight the main navigation on a sub-navigator of the corresponding page when I visit a subordinate navigation that corresponds to the primary flight?

Online, and so on, I hope that friends can guide the doubts.

Reply content:

Similar to the above navigation, I use the principle of its template inheritance in thinkphp to define a base.html file that contains the generic header header,nav navigation , footer bottom, Other HTML files will inherit the base.html template.

• How do I highlight the navigation of the current page when I visit other pages?

• For example, when I visit the actual combat page, how to highlight the current page corresponding navigation, if the navigation is multi-level navigation?

• How do I correctly highlight the main navigation on a sub-navigator of the corresponding page when I visit a subordinate navigation that corresponds to the primary flight?

Online, and so on, I hope that friends can guide the doubts.

This seems to belong to the JS control, and the landlord has also done nav navigation, thinkphp in the use of its label, introduced to try not to know the line, because it is the default to run the entrance file will contain the need to use it

After loading the page, judge whether the current is the beginning of the url header.html a label in href ,

For example url:xxx.com/home/xxxx => a href="xxx.com/home" , to add a highlight after a match class active

Should you be bothered by the fact that the same layout page needs to contain different pages and doesn't know how to show each page the navigation it belongs to?

If so, then JS, you can start with the URL, analyze the URL rules, and then highlight the menu

php words, URL or controller method can be, also judge, highlight words, with JS or CSS can be implemented

In general, what you need to remember is that, depending on the form of the visit, you peel it off, judge it, and then highlight it.

Method 1, you can use the JS control, in each page containing this base to write JS, deliberately useless ES6, convenient for you to use.

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. Thinking, get the URL of the page that is currently requested, and then match the path, but the PHP set is not used for more than a year, forget how to write ....

Individuals generally in the _initialize:

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

   
    class="active" >装修公司
    

    
     class="active" >装修招标
    
   

Similar to this, the Curr_nav value is then judged in the template.
If the navigation is simple, directly through the module, controller, the combination of operations to determine
JS can also judge just feel the page will flicker uncomfortable!

