Using server-side includes, what are options for selecting a current nav element?

Asked 17/7, 2013 at 17:35 Answered 17/7, 2013 at 17:52

Solved javascript jquery navbar ssi server-side-includes

I'm using a 10-item unordered list as a navigation bar. Using SSI, I put the header and navigation bar into every file. I'd like a way to add class="active" to the ruleset of the currently active page (the current page's corresponding <li> will have a different style).

Including the file in every page means that, in the included file, none of the items can have the active class.

Is there a way to do this in just a few lines of code? (using jQuery/JS)

My other option is to match the last part of the URL to part of the href of the anchor within each list item.

Solution: (courtesy of RomanGorbatko)

var tab = window.location.pathname.split("/");
tab = tab[tab.length - 1];  // This probably is not efficient - suggestions?
if (tab != "") $("#nav a#" + tab).addClass("active");

Redhanded answered 17/7, 2013 at 17:35 Comment(3)

I usually do this server-side. I compare the target template to the url in the nav and apply the class accordingly. The same can be done using javascript by inspecting window.location and then manipulating the html for the nav. (such as adding a class) – Fenestration 17/7, 2013 at 17:37

possible duplicate of jQuery add class .active on menu – Patch 17/7, 2013 at 17:38

That's a great link. Thanks – Redhanded 17/7, 2013 at 17:48

For example. You hame some pages:

And you menu has a next form:

<ul>
    <li class="index">index</li>
    <li class="faq">faq</li>
    <li class="forum">forum</li>
</ul>

Now you check the url of your page.

var index = window.location.pathname.split('/')[1];
$('ul.li').removeClass('active');
$('li.' + index).addClass('active');

Profit!

Cogitative answered 17/7, 2013 at 17:46 Comment(4)

Thank you! This is probably the simplest way to do it. – Redhanded 17/7, 2013 at 17:52

You should remove the active class from other li's. – Burnout 17/7, 2013 at 17:54

@trojansdestroy I change my anwer using vipulsharma comment. – Cogitative 17/7, 2013 at 18:1

@vipulsharma: There's no need to do so, as in the included file, none of the items have the "active" class (I add it per-page via this jQuery) – Redhanded 17/7, 2013 at 18:22

First detect the page name

var index = document.location.href.lastIndexOf("/") + 1;
var page = document.location.href.substring(index,document.location.href.length);

Than find the li with same name and add class active to it considering the navbar has class navbar in the ul.

$('ul.navbar li').each(function() {
    $(this).removeClass('active');   
    if($.trim($(this).text()) == page) {
        $(this).addClass('active');
    } 
});

This will fulfill your requirement. NOTE: I have assumed li name same as page name

Burnout answered 17/7, 2013 at 17:52 Comment(0)

For example. You hame some pages:

And you menu has a next form:

<ul>
    <li class="index">index</li>
    <li class="faq">faq</li>
    <li class="forum">forum</li>
</ul>

Now you check the url of your page.

var index = window.location.pathname.split('/')[1];
$('ul.li').removeClass('active');
$('li.' + index).addClass('active');

Profit!

Cogitative answered 17/7, 2013 at 17:46 Comment(4)

Thank you! This is probably the simplest way to do it. – Redhanded 17/7, 2013 at 17:52

You should remove the active class from other li's. – Burnout 17/7, 2013 at 17:54

@trojansdestroy I change my anwer using vipulsharma comment. – Cogitative 17/7, 2013 at 18:1

@vipulsharma: There's no need to do so, as in the included file, none of the items have the "active" class (I add it per-page via this jQuery) – Redhanded 17/7, 2013 at 18:22

Here is a link to a jquery/javascript free solution

http://www.webtrainingcentre.com/server-side-includes/tutorials/create-active-links-using-common-include/

I am sure this will help.

Roye answered 17/7, 2013 at 17:35 Comment(1)

This is the most smartest way webtrainingcentre.com/server-side-includes/… No need to use any javascript   <nav class="primNav"> <ul> <li class="  " ><a href="index.shtml" title="Alle kabaler">Hjem</a></li> </ul> </nav> – Roye 23/2, 2018 at 12:24

You can first look at the url to detect the page name, then you can match the page name to classes you define on your LIs.

if(document.location.href.indexOf('index')>-1) {
      $('li.index').addClass('active')
}

You can also do this with the page title instead if you wish, instead of the url.

Another trick is to add a class to the BODY tag, per page, and let CSS do the work:

body.index li.index {
    background-color:#FF0000
}

body.aboutus li.aboutus {
  .... whatever
}

Oxfordshire answered 17/7, 2013 at 17:38 Comment(1)

Interesting. I hadn't thought of giving <body> a class; I'll keep that trick in mind. I was looking for what vimpyboy linked above though. Thanks for the intriguing answer! – Redhanded 17/7, 2013 at 17:48

Recommended topics

Hot tags