I am working on a bootstrap, jquery/js, php, mysql site, and for some reason my custom JS files are not working properly. Right now I’m trying to add a class active with jquery script to my menu, the bootstrap cdns are working well both css and js, but my own js files aren’t. The add class does not work, nor does other things I’ve tried with custom js files. It seems as if they were just not linked at all. I’m relatively new to php and building a site in this manner, in which certain php files are componentes, while other are pages. I’m not sure if I am just making beginners mistakes. This is my footer.php file:
<footer class="site-footer text-center fixed-bottom">
<p>© 2024 PHP Site | All rights reserved.</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js" integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="js/class-active.js"></script>
</body>
</html>This is what my header.php file looks like:
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $pageTitle; ?> | <?php echo $siteTitle; ?></title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" aria-current="page" href="index.php"><img class="house-img" src="img/house.png"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0 d-flex justify-content-between">
<li class="nav-item" id="navigation-about">
<a class="nav-link" href="about.php">About Us</a>
</li>
<li class="nav-item" id="navigation-menu">
<a class="nav-link" href="#">Menu Item</a>
</li>
<li class="nav-item" id="navigation-faq">
<a class="nav-link" href="faq.php">FAQ</a>
</li>
<?php
if (isset($_SESSION['user_id'])) {
// If logged in, show the Logout option
echo '<li class="nav-item" id="navigation-logout">
<a class="nav-link" href="logout.php">Log Out</a>
</li>';
} else {
// If not logged in, show Login and Register options
echo '<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Login
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" id="nav-login" href="login.php">Log In</a></li>
<li><a class="dropdown-item" id="nav-register" href="sign-up.php">Register</a></li>
</ul>
</li>';
}
?>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>And what a single page looks like, about.php:
<?php
include 'config.php';
$pageTitle = "About Us";
include 'header.php';
?>
<h1 class="text-center mt-5"><?php echo $pageTitle; ?></h1>
<?php include 'footer.php'; ?>Finally the jQuery for the add class, that is not working…
// Use jQuery's document ready function to ensure the DOM is fully loaded
$(document).ready(function() {
// Attach a click event handler to the <a> tags within .nav-item
$('.nav-item a').on('click', function() {
// Remove 'active' class from all <a> tags within .nav-item
$('.nav-item a').removeClass('active');
// Add 'active' class to the clicked <a> tag
$(this).addClass('active');
});
});I linked all the scripts in the footer.php. What am I doing wrong?
Thanks for any help you provide. The site is live at php.jacobowitzdevs.com