How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?

安稳与你 提交于 2019-12-11 19:59:32

问题


So, I run my church's website and I try to stay pretty basic in the coding, but we have seasonal pages that we add and remove from the website all the time so I get tired of changing the "simple" HTML code on every page for the nav bar. I have found where I can use PHP and have one code, like but is it possible to have the current page highlighted, i.e. on our website now, the current page name is bold and a different color.

I have also seen JS do this (Highlighting current page in the nav) but I don't really understand how to implement this, so if you think this could be the better route for me, and can help explain how to do it, that would be cool.

Any help would be great!


回答1:


add an id attribute to the body tag of each of your pages, like this:

<body id="home"> <!-- this would be for your home page for example -->

...

<body id="about"> <!-- this would be for your about page... -->

add the same to the li tags of your nav, like this:

<li id="home">Home</li>
<li id="about">About</li>

then in the CSS file just do this:

body#home li#home, body#about li#about { // style of the active menu item }


来源:https://stackoverflow.com/questions/22490994/how-can-i-use-one-nav-bar-code-on-multiple-pages-but-have-the-current-page-high

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!