php 如何在选定页面上添加动态 Active 类

how to add dynamic Active class on selected page

提问by Zaib Azhar Rao

http://hotelshimlahill.com/demo/this website I've made in bootstrap, the header section including nav bar is coming from a separate file called 'header.php' Now i want to add active class for each page on which user is visiting. how can i do that? Kindly assist me. Thankyou.

http://hotelshimlahill.com/demo/我在引导程序中创建的这个网站，包括导航栏的标题部分来自一个名为“header.php”的单独文件现在我想为用户所在的每个页面添加活动类正在访问。我怎样才能做到这一点？请帮助我。谢谢你。

回答by Felix

In your individual page such as about.php, services.php, you can do:

在您的个人页面中，例如about.php, services.php，您可以执行以下操作：

$currentPage = 'about'; // current page is about, do the same for other page
include('header.php');

Then in your header.php, you can check:

然后在您的header.php，您可以检查：

<ul class="nav navbar-nav">
    <li class="<?php if($currentPage =='about'){echo 'active';}?>" ><a href="index.php">Home</a></li>
    <li class="<?php if($currentPage =='services'){echo 'active';}?>" ><a href="about.php">about</a></li>
</ul>

Or you can try to use jQuery as well:

或者您也可以尝试使用 jQuery：

$(document).ready(function($){
    var url = window.location.href;
    $('.nav li a[href="'+url+'"]').addClass('active');
});

回答by Aditya

in you bootstrap css you find this line i think it should be at line no 4841

在你的 bootstrap css 中你会发现这一行，我认为它应该在第 4841 行

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus{ background-color: #5C0000; color: #FFFFFF; }

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus{ background-color: #5C0000; 颜色：#FFFFFF；}

you change this line as

您将此行更改为

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a.active{
background-color: #5C0000;
color: #FFFFFF;
}

now in your project file find the section where the navigation generated those line

现在在您的项目文件中找到导航生成这些行的部分

<ul class="nav navbar-nav">                     
    <li><a href="index.php">Home</a></li>                       
    <li><a href="about.php">about</a></li>
    <li><a href="services.php">services</a></li>
    <li><a href="facilities.php">facilities</a></li>
    <li><a href="reservations.php">booking</a></li>
    <li><a href="testimonials.php">testimonials</a></li>
    <li><a href="careers.php">careers</a></li>
    <li><a href="contactUs.php">contact Us</a></li>          
</ul>

then change it as accrodinly

然后将其更改为accrodinly

<ul class="nav navbar-nav">                     
    <li><a href="index.php" <?php if($active=='Home') echo "class='active'"; ?>>Home</a></li>                       
    <li><a href="about.php" <?php if($active=='about') echo "class='active'"; ?>>about</a></li>
    <li><a href="services.php" <?php if($active=='services') echo "class='active'"; ?>>services</a></li>
    <li><a href="facilities.php" <?php if($active=='facilities') echo "class='active'"; ?>>facilities</a></li>
    <li><a href="reservations.php" <?php if($active=='booking') echo "class='active'"; ?>>booking</a></li>
    <li><a href="testimonials.php" <?php if($active=='testimonials') echo "class='active'"; ?>>testimonials</a></li>
    <li><a href="careers.php" <?php if($active=='careers') echo "class='active'"; ?>>careers</a></li>
    <li><a href="contactUs.php" <?php if($active=='contact') echo "class='active'"; ?>>contact Us</a></li>          
</ul>

then you have to a litle bit change in every files that you have in navigation link such as index.php add this line at the top of the file that i mention on the navigation link

那么你必须对导航链接中的每个文件（例如 index.php）进行一点更改，在我在导航链接中提到的文件顶部添加这一行

<?php $active ='Home'; ?>

and for about.php

和 about.php

<?php $active ='about'; ?>

I think it of course select of your active page thnaks

我认为它当然会选择您的活动页面 thnaks

回答by Savan Koradia

All menu links are inside ul > li. so, give id to all li. and on each page by using jquery addClass "active" to li.

所有菜单链接都在 ul > li 里面。所以，给所有 li 提供 id。并在每个页面上使用 jquery addClass "active" to li。