Javascript Bootstrap 3.0：导航选项卡未切换

我用的是像这样的引导3导航标签

<ul class="nav nav-tabs pull-right projects"  role="tablist" style="margin-top:20px;">
    <li class="active"><a role="tab" data-toggle="tab" href="#progress">In Progress</a></li>
    <li><a role="tab" data-toggle="tab" href="#done">Done</a></li>                        
</ul>

<div class="tab-content">
 <div id="progress" class="tab-pane fade active in">
     content for progress 
 </div>
 <div id="done" class="tab-pane fade">
   content for done 
 </div>
</div>

进展内容
完成的内容

这些是我收到的js文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

---

当页面加载选项卡正常工作时，但当我单击第二个选项卡并希望返回到第一个不切换的选项卡时，我的代码有什么问题，请帮助切换JavaScript文件

---

Jquery先来，然后引导

制作一个带有演示的JSFIDLE或codepen，然后回来。。。这可能更有意义…这和我发布代码时的更改是一样的。请共享您的代码，这在我的Web服务器上运行良好