使用css激活导航

Question

我有两个页面，并且在这两个页面中都包含了导航，所以编辑一次比编辑两个页面更容易。但现在我非常不确定如何实现类active，它显示了您使用css所处的位置（亮点）。这是代码：

<li><a href="../rapport/index.php" class='rapport' >Rapport</a></li> 
<li><a href="../diagram/index.php" class='diagram' >Diagram</a></li>    

EDIT：这是图像、css和图标的css。在刀片中，我这样做是为了让它活跃起来：

<li  class='pil  {{ ($aktiv == 'sok') ? 'active' : '' }}'> <a class='sok' {{HTML::linkRoute('sok','Søk')}}</a> </li>  

CSS：

.navbar-default .navbar-nav>.active>a.rapport:before,
.navbar-nav>li>a.rapport:before { background-image: url('../images/top3.png'); }
.navbar-default .navbar-nav>.active>a.diagram:before,
.navbar-nav>li>a.diagram:before { background-image: url('../images/top2.png'); }

Answer 1

将变量$page添加到页面中。例如

在Rapport页面

<?php
$page = 'Rapport';
include('header.php');
?>

在图表页面

<?php
$page = 'diagram';
include('header.php');
?>

header.php

<li><a href="../rapport/index.php" class="<?php if($page=='Rapport'){echo 'active';}?>" >Rapport</a></li>
<li><a href="../diagram/index.php" class="<?php if($page=='diagram'){echo 'active';}?>">Diagram</a></li>

Answer 2

Please find the CSS code:
#navigation{ 
width:100%;
height:35px;
}
#menu {
width:580px;
height:35px;
}
#menu li{
list-style-type:none;
float:left;
}
#menu a {
height:35px;
color:#FFFFFF;
}
#menu a:hover{
color: #FFFFFF;
text-decoration:none;
}
.active {
color:#000000;
text-decoration:none;
font-family: Calibri;
font-size: 14px;
}
HTML code:
When rapport/index.php page open make sure your li should be active something like following
<div id="navigation">
<li class="active"><a href="../rapport/index.php" class="rapport active">Rapport</a></li>
<li><a href="../diagram/index.php" class="diagram">Diagram</a></li>
</div>
And when diagram/index.php open then use following
<div id="navigation">
<li><a href="../rapport/index.php" class="rapport active">Rapport</a></li>
<li class="active"><a href="../diagram/index.php" class="diagram">Diagram</a></li>
</div>

Answer 3

如果您有很多页面，并且不想使用jQuery或PHP，则将活动类添加到当前页面

<li><a href="../rapport/index.php" class="rapport active">Rapport</a></li>
<li><a href="../diagram/index.php" class="diagram">Diagram</a></li>
.active {
  background: red;
  color: #fff;
}

记得根据活动页面更改活动链接类。

---

好的，在问题更新后，我将提供的PHP解决方案

<li><a href="index.php" <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="active"'; ?>>Link Text</a></li>

或jQuery解决方案

<li><a href="index.php">Link Text</a></li>
<script>
  $('li a[href="'+window.location.pathname.split('/').pop()+'"]').addClass('active');
</script>