Content panel not switching for clicked tab - jquery-tabs

Question

Can someone please provide help with my script & teach me why my content panels don't switch with the added script to add the 'selectedTab' class? They switch fine when I remove the script altogether. I tried removing the 'active' class from Home which obviously didn't work. Sorry I'm so clueless. thanks in advance for your help.
<style>
/*Selected Tab*/
.selectedTab {
background-color:#CBD8E1;;
border-left: 1px solid rgb(69, 145, 193);
border-top: 1px solid rgb(69, 145, 193);
border-right: 1px solid rgb(69, 145, 193);
border-bottom: nonet;
color: rgb(69, 145, 193);
line-height: 0.5em;
padding: 8px 10px;
}
/*Non-Selected Tab*/
.notSelectedTab {
border: 1px solid rgb(69, 145, 193);
border-bottom: none;
background-color: rgb(69, 145, 193);
color: rgb(255, 255, 255);
line-height: 0.5em;
margin-top: -1px;
padding: 8px 10px;
}
</style>
<script>
$( document ).ready( function() {
$('ul.nav li a').click(
function(e) {
e.preventDefault(); // prevent the default action
e.stopPropagation(); // stop the click from bubbling
$('.selectedTab').removeClass('selectedTab').addClass('notSelectedTab');
$(this).addClass('selectedTab').removeClass('notSelectedTab');
});
});</script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li><a class="selectedTab" href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a class="notSelectedTab" href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a class="notSelectedTab" href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a class="notSelectedTab" href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="profile">Profile</div>
<div class="tab-pane" id="messages">Messages</div>
<div class="tab-pane" id="settings">Settings</div>
</div>