时间戳

首页 > 解决方案 > 动态引导 4 导航栏“活动”标签

javascript - 动态引导 4 导航栏“活动”标签

问题描述

单击标题时，我需要根据您现在所在的站点更改“活动”类。

我已经看到了一些使用 php 检查您是否在页面“noten.php”上的示例，它会相应地将导航栏类更改为活动状态，还检查了一些像这样的 Javascript

$('.navbar-nav .nav-link').click(function(){
$('.navbar-nav .nav-item').removeClass('active');
$(this).addClass('active');

}) 但没有任何效果

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="/">Projekt</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/">Startseite</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/noten.php">Noten</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Soon</a>
      </li>
    </ul>

标签： javascriptphp

解决方案

我们不太了解您的 PHP 逻辑，但实现可能非常简单：

<?php
  $uri_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
  $uri_segments = explode('/', $uri_path);
?>


<li class="nav-item <?php echo 'active page-' . $uri_segments[0]; ?>">
  <a class="nav-link" href="/">Startseite</a>
</li>

对于 urlhttp://foobar/first/second将添加类page-first。

推荐阅读