使用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更改活動引導菜單項

回答

相關問題