下拉菜单中的“活动”选项卡不会跳转到内容

Question

我想通过点击下拉菜单项打开并跳转到标签内容，但我的代码只打开标签内容而不跳转，并且没有活动标签列表。

我的下拉菜单代码是

<li><a href="#" data-toggle="dropdown" class="dropdown-toggle">Category<b class="caret"></b></a>
<ul class="dropdown-menu" id="categorydd">
<li><a href="#fday" data-toggle="tab">First Day</a></li>
<li><a href="#sday" data-toggle="tab">Second Day</a></li>
<li><a href="#tday" data-toggle="tab">Third Day</a>
</ul>

Tablist是

<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#fday" aria-controls="fday" role="tab" data-toggle="tab">FIRST DAY</a></li>
<li><a href="#sday" aria-controls="sday" role="tab" data-toggle="tab">SECOND DAY</a></li>
<li><a href="#tday" aria-controls="tday" role="tab" data-toggle="tab">THIRD DAY</a></li>
</ul>

和标签内容

<div role="tabpanel" class="tab-pane active" id="fday">
.....
</div>
<div role="tabpanel" class="tab-pane active" id="sday">
....
</div>
<div role="tabpanel" class="tab-pane active" id="tday">
....
</div>

JS

<script>
  $('#categorydd a').click(function (e) {
    e.preventDefault()
    $($(this).attr('href').tab('show')
  })
</script>