CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Drifter64
Drifter64

Reputation: 1123

How to highlight active nav tab in specific case

I am using this as a template for JS which selects proper nav using JQuery, with this API reference.

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';
?>
//More code, snipped from example: not relevant

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">

... this isnt working. What is different in my situation that causes the example to fail? All "li" elements end up with class "tab", none have "tab selected".

Upvotes: 0

Views: 693

Answers (2)

Multitut
Multitut

Reputation: 2169

My approach on these cases is as follows:

Add a unique id to each of your tabs (in addition to the class you already have) On each specific file (index.php, common.php, forum.php, etc) create an object with your selected tab:

var selected = $('#forumTab');

Execute a function where you ensure to be removing the active class from all tabs and add it only to your current tab:

$('.tab').removeClass('active');
selected.addClass('active');

Upvotes: 1

Tom Prats
Tom Prats

Reputation: 7911

I'm not sure if this is actually what's wrong, but I do notice that the href's in their example all start with / while yours do not. Relative pathing could be why yours isn't working.

So if you change your html to this you might be fine:

<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>

Upvotes: 1

Related Questions