Nav with class=";active";基于页面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Nav with class=";active";基于页面相关的知识,希望对你有一定的参考价值。

This is a way to have a navigation menu with active classes which are set according to what page is loaded. This only works on .php pages.
  1. // this goes at the top of the document, before the DOCTYPE
  2. <?php $page = basename($_SERVER['SCRIPT_NAME']); ?>
  3.  
  4.  
  5. // This goes in the page, either hard-coded, or by an include
  6. <ul id="nav">
  7.  
  8. <li <?php if ($page == 'index.php') { ?>class="active"<?php } ?>><a href="index.php" title="Welcome page">Home</a></li>
  9.  
  10. <li <?php if ($page == 'about.php') { ?>class="active"<?php } ?>><a href="about.php" title="About us page">About</a></li>
  11.  
  12. <li <?php if ($page == 'services.php') { ?>class="active"<?php } ?>><a href="services.php" title="Services page">Services</a></li>
  13.  
  14. <li <?php if ($page == 'news.php') { ?>class="active"<?php } ?>><a href="news.php" title="News page">News</a></li>
  15.  
  16. <li <?php if ($page == 'testimonials.php') { ?>class="active"<?php } ?>><a href="testimonials.php" title="Testimonials page">Testimonials</a></li>
  17.  
  18. <li <?php if ($page == 'contact_us.php') { ?>class="active"<?php } ?>><a href="contact_us.php" title="Contact us page">Contact us</a></li>
  19.  
  20. </ul>

以上是关于Nav with class=";active";基于页面的主要内容,如果未能解决你的问题,请参考以下文章

uni-app 点击切换class

Typescript JSON to Class with "es5"

MUI class="mui-switch" 开关 默认为选中

Java反射操作成员变量 Class can not access a member with modifiers "*"

在jquery中怎么使用css 类名和id 来获得元素

使用引导程序 nav-pill 单击下一步按钮时的表单验证