BootStrap タブの切り替え失敗に対する完璧な解決策-jsチュートリアル-php.cn

BootStrap タブの切り替え失敗に対する完璧な解決策

PHPz

リリース： 2018-10-13 15:29:29

オリジナル

2174 人が閲覧しました

ブートストラップがタブページを開発すると、タブページは正常に表示されますが、クリックしても対応するコンテンツ領域は変化しません。次に、BootStrap のタブ切り替えに失敗した場合の解決策をこの記事で紹介しますので、興味のある方はぜひ一緒にご覧ください

概要

Bootstrap がタブページを開発すると、タブページは正常に表示されます。ですが、クリックしても、対応するコンテンツ領域は変化しません。

具体的な症状と解決策

1. タブUIは表示されるが、クリックしても反応がなく、クリックしてもタブUIが切り替わらない

まず、bootstrap.css、jQuery.js、 bootstrap.js を正しくインポートし、導入順序が最初に jQuery、最後に bootstrap.js であることを確認してください。次に、コード内に JS を終了させる他のエラーがあるかどうかを確認します。

2. タブはクリックで切り替えられますが、最初のいくつかのコンテンツはクリック後に切り替えることができますが、次のコンテンツの切り替えに失敗します

原因:

コンテンツのHTML構造にエラーが発生しました余分な p 終了タグがタブに書き込まれ、タブコンテンツ p が途中で閉じられ、残りのタブパンが親子関係ではなく、元のタブコンテンツと水平関係になります。。よく観察してください。主な特徴は、本来タブコンテンツ領域に表示されるはずのコンテンツが、クリックするとページの下部に表示されることです。

【関連お勧め: ブートストラップチュートリアル】

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>bootstrap页签切换失效</title>
 <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 <!-- 先引入jQuery，再引入bootstrap.js-->
 <script src="//cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
 <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style>
  .content{
   width: 60%;
   margin: auto;
  }
 </style>
</head>
<body>
 <p class="content">
  <ul class="nav nav-tabs" id=&#39;consume_tab&#39;>
   <li><a href="#tab0" rel="external nofollow" data-toggle="tab">页签0</a></li>
   <li ><a href="#tab1" rel="external nofollow" data-toggle="tab">页签1</a></li>
   <li ><a href="#tab2" rel="external nofollow" data-toggle="tab">页签2</a></li>
   <li ><a href="#tab3" rel="external nofollow" data-toggle="tab">页签3</a></li>
   <li ><a href="#tab4" rel="external nofollow" data-toggle="tab">页签4</a></li>
  </ul>
 <p class="tab-content">
  <p class="tab-pane active " id="tab0">
   <p>
    <span>页签0内容</span>
   </p>
  </p>
  <p class="tab-pane fade " id="tab1">
   <p>
    <span>页签1内容</span>
   </p>
  </p>
  <p class="tab-pane fade " id="tab2">
   <p>
    <span>页签2内容,多了一个结束标签</span>
   <!-- 页签2内容多了一个结束标签-->
   </p>
   </p>
  </p>
  <p class="tab-pane fade " id="tab3">
   <p>
    <span>页签3内容,出现在页签2下方</span>
   </p>
  </p>
  <p class="tab-pane fade " id="tab4">
   <p>
    <span>页签4内容，出现在页签2下方</span>
   </p>
  </p>
 </p>
</p>
</body>
</html>

ログイン後にコピー