Utilizing this template for JavaScript to choose the appropriate navigation using JQuery, with reference to this API.
Snippet of my current code:
index.php
<html>
<head>
<title>ChillSpot Alpha 1.2.3</title>
<link rel="stylesheet" type="text/css" href="common/style.css">
<script type="text/javascript" src="common/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="background.js"></script>
<script type="text/javascript" src="common/navHighlight.js"></script>
<script type="text/javascript"> $( document ).ready( getImage );</script>
<script type="text/javascript"> $( document ).ready( setNavigation );</script>
</head>
<?php
include 'common/header.html';
?>
//Additional code, omitted for brevity
common/navHighlight.js
<!--
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".menuList a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').removeClass('tab');
$(this).closest('li').addClass('tab selected');
}
});
}
//-->
common/header.html
<div class="menu">
<ul class = "menuList">
<li class="tab"><a href="index.php">Home</a></li>
<li class="tab"><a href="comm.php">Communications</a></li>
<li class="tab"><a href="chillcraft/index.php">ChillCraft</a></li>
<li class="tab"><a href="forum.php">Forum</a></li>
<li class="tab"><a href="ud.php">Updates</a></li>
<li class="tab"><a href="about.php">About</a></li>
</ul>
</div>
<div class="content">
... the current implementation seems to be failing. What could be causing all "li" elements to have the class "tab" and not "tab selected" as intended in the example?