I have a navigation bar with tabs. A tab should become Active when clicking on it i.e. the css should change. Also previous content should be hidden and new content displayed but I'ts not behaving like I want it to:

<http://jsfiddle.net/8qz78pkc/>

What am I doing wrong?

SO requires some code here is some of the js:

```
$(document).ready(function(){
    $('.profileSubpage:gt(0)').hide();
    $(document).on('click','ul.profileTabs li',function(e){
         e.preventDefault();
         var number = $(this).index();
         $(".profileSubpage").hide().eq((this).index()).show();
         $(this).addClass("active").siblings().removeClass("active");
    });
});

```