Home/ Questions/Q 6346589
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T21:02:47+00:00

I´m pretty new with Jquery, so I´m not really sure what functions I should

  • 0

I´m pretty new with Jquery, so I´m not really sure what functions I should be using for my case.

I have a list of links, like so:

<ul class="topmenu">
           <li class="selected"><a href='index.html'>Hem</a></li>
           <li class=""><a href='services.html'>Tjänster </a></li>
           <li class=""><a href='about.html'>Om oss </a></li>
           <li class=""><a href='vaccancies.html'>Lediga jobb </a></li>
           <li class=""><a href='contact.html'>Kontakta oss </a></li>
</ul>

This is part of my footer, and I´m including this footer in all my pages using jquery load:

$('#footer_include').load('footer.html');

Now, my issue is that I want to be able to dynamically set the class “selected” to my list items, based on what page the user is currently on. So if the user is on vaccancies.html, I want the class for that list item to be set to “selected”. So I´m guessing something like

$(document).ready(function () {
     ...
             $(this).addClass('selected');
     ...

});

But as you can see, my code is incomplete… Can someone help me finish it? I guess I might need to add IDs to the individual list items aswell?

Cheers!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add custom data attributes

    <ul class="topmenu">
    <li data-pathname="/index.html" class="selected"><a href='index.html'>Hem</a></li>
    <li data-pathname="/services.html" class=""><a href='services.html'>Tjänster </a></li>
    <li data-pathname="/about.html" class=""><a href='about.html'>Om oss </a></li>
    <li data-pathname="/vaccancies.html" class=""><a href='vaccancies.html'>Lediga jobb </a></li>
    <li data-pathname="/contact.html" class=""><a href='contact.html'>Kontakta oss </a></li>
</ul>

    JQuery:

    $('li[data-pathname="' + window.location.pathname + '"]').addClass('selected');

    Example: http://jsfiddle.net/AlienWebguy/CstXK/

    If you wanted to use PHP to set the class, you could do this:

    <?php

  $selected['index']      = ($_SERVER['REQUEST_URI'] == '/index.html')      ? $_SERVER['REQUEST_URI'] : '';
  $selected['services']   = ($_SERVER['REQUEST_URI'] == '/services.html')   ? $_SERVER['REQUEST_URI'] : '';
  $selected['about']      = ($_SERVER['REQUEST_URI'] == '/about.html')      ? $_SERVER['REQUEST_URI'] : '';
  $selected['vaccancies'] = ($_SERVER['REQUEST_URI'] == '/vaccancies.html') ? $_SERVER['REQUEST_URI'] : '';
  $selected['contact']    = ($_SERVER['REQUEST_URI'] == '/contact.html')    ? $_SERVER['REQUEST_URI'] : '';

echo <<<HTML
<ul class="topmenu">
    <li class="{$selected['index']}"><a href='index.html'>Hem</a></li>
    <li class="{$selected['services']}"><a href='services.html'>Tjänster </a></li>
    <li class="{$selected['about']}"><a href='about.html'>Om oss </a></li>
    <li class="{$selected['vaccancies']}"><a href='vaccancies.html'>Lediga jobb </a></li>
    <li class="{$selected['contact']}"><a href='contact.html'>Kontakta oss </a></li>
</ul>
HTML;

    Of course that PHP could be cleaned up with an array iteration and a substr, etc., but you get the idea.

    • 0