如何在公共标题中使用class =“active”?

时间:2017-07-29 08:08:05

标签: php jquery

代码:header.php

<?php 
    $page = basename($_SERVER['PHP_SELF']);
    echo $page;
?>
<div class="nav-links"> 
    <nav class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                        
                </button>
                <a class="navbar-brand" href="index.php"><img src="images/logo.png" class="img-responsive"></a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav link-effect">
                    <li><a href="index.php" <?php if($page == 'index.php'){ echo 'class="active"';}?>>Home</a></li>
                    <li><a href="about.php" <?php if($page == 'about.php'){ echo 'class="active"';}?>>About</a></li>
                    <li><a href="services.php" <?php if($page == 'services.php'){ echo 'class="active"';}?>>Services</a></li>
                    <li><a href="portfolio.php" <?php if($page == 'portfolio.php'){ echo 'class="active"';}?>>Portfolio</a></li>
                    <li><a href="career.php" <?php if($page == 'career.php'){ echo 'class="active"';}?>>Career</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

的index.php

<?php include('header.php'); ?>

在这段代码中,我创建了一个包含在所有文件中的公共头文件。现在,我想使用class="active"来了解哪个菜单处于活动状态。如果我使用class="active",则所有文件只有一个菜单处于活动状态。那么,我该如何解决这个问题呢?请帮帮我。

谢谢

2 个答案:

答案 0 :(得分:1)

你的代码非常好。在你的&#39; header.php&#39;顶部的文件由此获取当前页面名称:

$page = basename($_SERVER['PHP_SELF']);

通过这种方式,您将获得当前的当前页面名称。

然后改变这个

<ul class="nav navbar-nav link-effect">
  <li><a href="index.php" <?php if($page == 'one'){ echo ' class="active"';}?>>Home</a></li>
  <li><a href="about.php" <?php if($page == 'two'){ echo ' class="active"';}?>>About</a></li>
  <li><a href="services.php" <?php if($page == 'three'){ echo ' class="active"';}?>>Services</a></li>
  <li><a href="portfolio.php" <?php if($page == 'four'){ echo ' class="active"';}?>>Portfolio</a></li>
  <li><a href="career.php" <?php if($page == 'five'){ echo ' class="active"';}?>>Career</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

到这个

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

</ul>
  

<强>更新

     

您正试图添加“活跃”字样。里面的锚标签。你需要添加   活跃的内部列表标记。

答案 1 :(得分:0)

你可以使用javascript / jquery

    var url = $(location).attr('pathname'); 

取决于你如何使用href 导航应使用以下链接https://www.w3schools.com/jsref/obj_location.asp

中的内容
    if (url != "/") {

        x = ".nav a[href^='" + x + "']";
        $(x).addClass('active');

        }
    else {
       $(".nav a[href^='/index.htm']").addClass('active');
    }

我还没有对此代码进行全面测试。