Marcar como activa una pestaña con JQuery

En este ejemplo muestro como marcar una pestaña u otra
Para ello uso el siguiente código JQuery:

$(document).on('click', 'ul li', function(){ 
    var $this= $(this);

    $('ul li').removeClass('active');
    $this.addClass('active');
});

Mediante el evento on de JQuery le pido que ejecute este códogo al hacer click sobre uno de los <li> en ese momento le pido que borre la clase ‘active’ de todos los <li> anteriores, y se la asigno al que lanza la petición, es decir al que ha sido pulsado.
Para hacerlo mas atractivo me he servido de los css de bootstrap, pero la idea es usar nuestros propios CSS y JS

Repositorio GitHub con el ejemplo de este artículo