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

Source: Internet
Author: User

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!

  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.