I am using the below code to create buttons/tab to navigate to a page. What I would like be able to do is to change the colour of the button to a different colour when going to the page that the button relates to. ie show the active page

<div class="tabs" style="left: 0px; width: 41.61%; height: 36px;">


.tabs { width:100%; display:inline-block; }

.tab-links li { margin:0px 5px; float:left; list-style:none; }

.tab-links a { padding:9px 15px; display:inline-block; border-radius:3px 3px 0px 0px; background:#123274; font-size:16px; color:#FFFFF; }

li.active a, li.active a:hover { color:#4c4c4c; }

.tab-content { padding:15px; border-radius:3px; box-shadow:-1px 1px 1px rgba(0,0,0,0.15); background:#fffFF; }

.tab { display:none; }

.tab.active { display:block;


1 Answer 1


Using javascript/jQuery, compare the url (href) of each links (.tab-links a) and if it matches, add the active class either to parent li or the anchor depending upon how your html and css is structured.

Here's something that can get you started:

var currentPath = window.location.pathname;

$(document).ready(function() {
  $('.tab-links a').each(function() {
     var href = $(this).attr('href');
     if(currentPath.indexOf(href) != -1) {
        // add active class
  • Thanks for the code, I now have a working solution. I have many pages that I need to use this on. Instead of pasting the code on each page where do I need to place the code so that it effects all pages?
    – Mike Blair
    Commented Feb 9, 2015 at 10:53
  • Either in a page layout or in a master page. Add the script to it's own specific file and reference it.
    – Aveenav
    Commented Feb 9, 2015 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.