Question

http://hotelshimlahill.com/demo/ 这个网站我是用bootstrap制作的，包含导航栏的标题部分来自一个名为＆＃39; header.php＆＃39;的单独文件。现在我想为用户访问的每个页面添加活动类。我怎样才能做到这一点？请帮助我。三江源。

Answer 1

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

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

然后在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>

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

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

Answer 2

所有菜单链接都在ul＆gt;内李。所以，给所有李的身份。并在每个页面上使用jquery addClass“active”到li。

Answer 3

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

.navbar-inverse .navbar-nav＆gt; li> a：悬停，.navbar-inverse .navbar-nav＆gt; li>答：重点{ background-color：＃5C0000; 颜色：#FFFFFF; }

您将此行更改为

.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;
}

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

<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>

然后将其更改为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>

然后你必须在导航链接中的每个文件中进行一些改变如的index.php 在我在导航链接

上提到的文件顶部添加此行

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

和about.php

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

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

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

3 个答案: