我如何在多个页面上使用一个导航条代码,但有当前页面突出显示


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

所以,我经营我的教堂网站,我尽量保持相当基本的编码,但我们有季节性的页面,我们添加和删除从网站所有的时间,所以我厌倦了改变"简单"的HTML代码在每个页面的导航栏。我发现在哪里我可以使用PHP,并有一个代码,但有可能有当前页面突出显示,即在我们的网站上,当前页面名称是粗体和不同的颜色。

我也见过JS这样做(在导航中突出显示当前页面),但我真的不明白如何实现这一点,所以如果你认为这对我来说可能是更好的路线,并且可以帮助解释如何做到这一点,那将是很酷的。

任何帮助将是伟大的!

为每个页面的body标签添加一个id属性,如下所示:

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

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

添加相同的li标签的导航,像这样:

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

然后在CSS文件中这样做:

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