CSS show active tab

Question

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

BE DE NL UK

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

}

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
        $(this).addClass('current');
     }
  });
});