快捷導(dǎo)航

BootStrap 頁簽切換失效的解決方法

更新時(shí)間：2017年08月17日 15:14:11 作者：餡餅

bootstrap開發(fā)標(biāo)簽頁時(shí)，標(biāo)簽頁顯示正常，但點(diǎn)擊時(shí)候?qū)?yīng)內(nèi)容區(qū)域沒有變化。接下來通過本文給大家分享BootStrap 頁簽切換失效的解決方法，感興趣的朋友一起看看吧

概述

bootstrap開發(fā)標(biāo)簽頁時(shí)，標(biāo)簽頁顯示正常，但點(diǎn)擊時(shí)候?qū)?yīng)內(nèi)容區(qū)域沒有變化。

具體癥狀與解決方案

1.標(biāo)簽頁UI出現(xiàn)，但點(diǎn)擊無反應(yīng)，標(biāo)簽頁UI并未隨點(diǎn)擊進(jìn)行切換

先檢查bootstrap.css，jQuery.js和bootstrap.js是否有正確引入，并保證引入順序jQuery在前，bootstrap.js在后。再檢查代碼中是否有其他報(bào)錯(cuò)中止了JS。

2.標(biāo)簽頁可以隨點(diǎn)擊進(jìn)行切換，但點(diǎn)擊后前面幾條內(nèi)容可以切換，但后面幾條內(nèi)容切換失敗

產(chǎn)生原因：

內(nèi)容區(qū)域的html結(jié)構(gòu)出現(xiàn)錯(cuò)誤，在單個(gè)tab中多寫了一個(gè)div的結(jié)束標(biāo)簽，使得tab-content這一div過早的關(guān)閉，剩下的tab-pan則與原來的tab-content變成了平級的關(guān)系而不是父子關(guān)系。仔細(xì)觀察，點(diǎn)擊之后原來應(yīng)該出現(xiàn)在tab-content區(qū)域的內(nèi)容會(huì)出現(xiàn)在頁面的下方是主要的特征。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>bootstrap頁簽切換失效</title>
 <link  rel="external nofollow" rel="stylesheet">
 <!-- 先引入jQuery，再引入bootstrap.js-->
 <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
 <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style>
  .content{
   width: 60%;
   margin: auto;
  }
 </style>
</head>
<body>
 <div class="content">
  <ul class="nav nav-tabs" id='consume_tab'>
   <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>
 <div class="tab-content">
  <div class="tab-pane active " id="tab0">
   <div>
    <span>頁簽0內(nèi)容</span>
   </div>
  </div>
  <div class="tab-pane fade " id="tab1">
   <div>
    <span>頁簽1內(nèi)容</span>
   </div>
  </div>
  <div class="tab-pane fade " id="tab2">
   <div>
    <span>頁簽2內(nèi)容,多了一個(gè)結(jié)束標(biāo)簽</span>
   <!-- 頁簽2內(nèi)容多了一個(gè)結(jié)束標(biāo)簽-->
   </div>
   </div>
  </div>
  <div class="tab-pane fade " id="tab3">
   <div>
    <span>頁簽3內(nèi)容,出現(xiàn)在頁簽2下方</span>
   </div>
  </div>
  <div class="tab-pane fade " id="tab4">
   <div>
    <span>頁簽4內(nèi)容，出現(xiàn)在頁簽2下方</span>
   </div>
  </div>
 </div>
</div>
</body>
</html>

審查元素時(shí)看到tab-pan與tab-content在同級中出現(xiàn)是最明顯的特征。這時(shí)候只需要查看最后一個(gè)能生效點(diǎn)擊的頁簽中的代碼(示例中為tab2)，將多余的div結(jié)束標(biāo)簽去掉即可。

總結(jié)

這種錯(cuò)誤易除了剛接觸bootstrap的開發(fā)者容易遇見之外，使用模板引擎配合bootstrap進(jìn)行開發(fā)的過程中，頁面結(jié)構(gòu)嵌套關(guān)系比較復(fù)雜的時(shí)候也容易產(chǎn)生這類錯(cuò)誤，但清楚錯(cuò)誤產(chǎn)生原理還有分析方法之后，解決起來并不困難。

您可能感興趣的文章: