Установить активный класс в Navbar динамически

Question

Установить активный класс в Navbar динамически

Первоначально у меня был загрузчик navbar, и я жестко закодировал код navbar в каждый из моих html-файлов. Я установил активный класс вкладки любой страницы, которую пользователь просматривал вручную, следующим образом:

    <ul class="nav navbar-nav">
<li class="active"><a href="homepage.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="map.html">View Map</a></li>
<li><a href="index.html">Submit Document</a><li>
<li><a href="contact.html">Contact</a></li>
</ul>

Это работало нормально, но я понял, что повторять подобный код было бы плохой практикой, поэтому я поместил код navbar в отдельный файл, превратил все мои html-файлы в файлы php и использовал оператор php include для загрузки панели навигации на каждой странице. , Затем я использовал JavaScript в попытке динамически установить активный класс. Тем не менее, я не могу получить активный класс для отображения при нажатии на мои вкладки.

<head>
<link href="../css/navbar.css" type="text/css" rel="stylesheet" />
</head>

<!-- JAVASCRIPT TO TOGGLE ACTIVE CLASS-->
<script type="text/javascript">
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
</script>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <!-- Mobile collapse-->
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a class="navbar-brand" href="homepage.html">
<img src="../images/pksoilogo.png" id="logo">
</a>
</div>
<div class="collapse navbar-collapse"> <!-- Mobile collapse/Dropdown-->
<ul class="nav navbar-nav">
<li><a href="homepage.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="map.php">View Map</a></li>
<li><a href="index.php">Submit Document</a><li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
</nav>

Любые мысли о том, как исправить JavaScript, чтобы это исправить?

0

include navbar php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

РЕДАКТИРОВАТЬ — Извините, я не читал ту часть о том, что вы хотите исправить Javascript. Надеюсь, кто-то может дать JS решение вашей проблемы достаточно скоро!

Вот один из способов сделать это.

<ul class="nav navbar-nav">
<li <?php if (basename($_SERVER['PHP_SELF']) == 'homepage.php') echo 'class="active"' ?>><a href="homepage.php">Home</a></li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'about.php') echo 'class="active"' ?>><a href="about.php">About</a></li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'map.php') echo 'class="active"' ?>><a href="map.php">View Map</a></li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'index.php') echo 'class="active"' ?>><a href="index.php">Submit Document</a></li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'contact.php') echo 'class="active"' ?>><a href="contact.php">Contact</a></li>
</ul>

Очевидно, что это не самый чистый способ, но это довольно легко. Вы также можете сделать функцию, которую вы могли бы вызвать, чтобы она выглядела немного лучше.

0