BootstrapとThymeleafのタブ

私はコンテンツでタブを作成しようとしています。ここにHTMLコードがあります。最初にページのメインタブを読み込むと、次に名前をクリックすると何も起こりません。コンテンツパネルは開きません。BootstrapとThymeleafのタブ

<!DOCTYPE HTML> 
<html xmlns:th="http://www.thymeleaf.org">  
<head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="ID=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
</head> 
<body> 
    <div class="panel">   
     <div class="panel-body"> 
      <ul class="nav nav-tabs nav-tabs-flat nav-justified"> 
       <li class="active"><a th:href="@{#flatmain}" data-toggle="tab">Main</a></li> 
       <li><a th:href="@{#flatnames}" data-toggle="tab">Names</a></li> 
      </ul>   
      <div id="myTabContent" class="tab-content">   
       <!-- flat-main --> 
       <div class="tab-pane fade active in" id="flatmain"> 
        <div class="row" style="padding: 1px;"> 
         <div class="form-group"> 
          <label class="control-label col-md-2">Main</label> 
          <div class="col-md-2"> 
           <input class="form-control" id="disabledMain" type="text" placeholder="Main Value" disabled="disabled" /> 
          </div>       
         </div> 
       </div>      
       </div> 
       <!-- flat-main -->    
       <!-- flat-names -->    
       <div class="tab-pane fade" id="flatnames"> 
        <div class="row" style="padding: 11px;"> 
         <div class="form-group"> 
          <label class="control-label col-md-2">Full Name</label> 
          <div class="col-md-2"> 
           <input class="form-control" id="disabledScac" type="text" placeholder="26 Character Value" disabled="disabled" /> 
          </div>      
         </div> 
       </div>     
       </div> 
       <!-- flat-names --> 
      </div> 
      </div> 
    </div> 
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>   
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.js"></script>  
</body> 
</html>

bootstrapとthymeleafを使用してタブを切り替える必要があります。私のタブの名前は静的で、それらは常に同じままです。コンテンツパネルのみを変更する必要があります。

出典

2017-11-01 Anu

実際にエラーコンソールを確認する必要があります。

：それは、HTTPS接続で

ロードアップあなたのページには、次のエラーログが生成さなど、それがリソースをロードできない場合は、あなたの改ページについてのフィードバックを与えることで（ほとんどの時間）素晴らしいです

スクリプトの一部またはすべてが読み込まれていないようです。

出典

2017-11-01 20:13:43 amphetamachine

URLを次のように変更しました。まだアクションがアクティブではありませんhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js – Anu

これは、変更する必要のあるjqueryのURLです。 – amphetamachine

答えて

関連する問題