内容面板未切换单击的选项卡

Question

有人可以提供我的脚本和帮助的帮助吗？教我为什么我的内容面板不会使用添加的脚本进行切换以添加“已选择”#T;＆＃39;类？当我完全删除脚本时，它们会正常切换。我尝试删除“活跃的”＃39;从家里上课，显然没有工作。对不起，我很无能为力。提前感谢您的帮助。

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