2016-06-11 75 views
0

即使在包含所有脚本文件后,下面给出的代码仍然无法正常工作。我看不到面板上的切换。 需要添加哪些代码?为什么下面的代码不会切换面板?

<html> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 
    <div class="row aet-content-fluid"> 
      <div class="panel-group ud-accordion" id="accordion" role="tablist" aria-multiselectable="true"> 
       <div class="panel panel-default"> 
        <div class="panel-heading" role="tab" id="headingOne"> 
         <div class="panel-title"> 
          <h2> 
           <a role="button" data-parent="#accordion" 
             data-toggle="collapse" href="javascript:void(0);#tab1" aria-controls="tab1" 
             class="" aria-expanded="false"><span>Office Information</span> 
           </a> 
          </h2> 
         </div> 
        </div> 
         <div id="tab1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
          <div class="panel-body office-detail-panelBody"> 
        This content is straight in the template. 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html> 

回答

0

我花了一段时间,但似乎问题在于你包含的脚本。 首先你需要一个jQuery包含。 第二:订单很重要。

当我设置<head>部分:

<head> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
    <script src="example.js"></script> 
    </head> 

它的工作!三个第一包含(链接和两个脚本)是引导创建者推荐的顺序。

相关问题