使用html和css更改活动引导菜单项

我希望能够更改文件中哪个菜单项处于活动状态，具体取决于我所在的文件。我在我的三个文件中包含menu.html（下面的文件）：a.html，b.html和c.html。我该如何使用html和css来做到这一点？我使用Boostra菜单。我基本上想要根据当前文件改变活动的菜单项。使用html和css更改活动引导菜单项

<ul id="navbar_menu" class="nav nav-tabs nav-justified"> 
      <li id="a"><a href="#">a</a></li> 
      <li id="b"><a href="#">b</a></li> 
      <li id="c"><a href="#">c</a></li> 
     </ul>

来源

2015-03-30 Filip Eriksson

你试过我的回答吗？这应该做你所问的是否正确实施。 – Nima 2015-03-30 22:34:42

我不知道如何将列表项目设置为当前页面的class =“active”。 – 2015-03-31 17:57:46

你不需要定义一个需要JavaScript的活动类。但是您可以将活动状态设置为当前页面的链接。如果你提供你的代码，我可以帮你实现。 – Nima 2015-03-31 18:08:47

我的理解你正在使用PHP include for menu。

你可以做到这一点，自动找到相关的菜单到当前页面：

在你3页你的“相关类”添加到您的DIV /节是包装：

<section class="a"> 
    <!-- your php include for menu--> 
</section>

第二页：

<section class="b"> 
    <!-- your php include for menu--> 
</section>

第三页：

<section class="c"> 
    <!-- your php include for menu--> 
</section>

而在你的CSS：

.a > li#a { 
    /* Active Menu Style */ 
} 
.b > li#b { 
    /* Active Menu Style */ 
} 
.c > li#c { 
    /* Active Menu Style */ 
}

这将使菜单与你的PHP当前页面包含文件：

<ul> 
    <li id="a"><a href="#">a</a></li> 
    <li id="b"><a href="#">b</a></li> 
    <li id="c"><a href="#">c</a></li> 
</ul>

来源

2015-03-30 20:54:33 Nima

如果我是正确的，你应该作出积极类和补充它到实际的活动列表项目。

来源

2015-03-30 20:55:30

使用html和css更改活动引导菜单项

回答

相关问题