Question

我有两个页面，并且在两个页面中都包含了导航功能，这使得编辑它一次比在两者中都更容易编辑。但是现在我非常不确定如何实现活动类，它显示了你在（突出显示）css中的哪些内容。这是代码：

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

编辑：这是图像和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

如果您有许多页面并且不想使用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>

Answer 3

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>

使用css进行导航活动

3 个答案: