BootStrap 頁(yè)簽切換失效的解決方法

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

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

概述

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

具體癥狀與解決方案

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

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

2.標(biāo)簽頁(yè)可以隨點(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ò)早的關(guān)閉，剩下的tab-pan則與原來(lái)的tab-content變成了平級(jí)的關(guān)系而不是父子關(guān)系。仔細(xì)觀察，點(diǎn)擊之后原來(lái)應(yīng)該出現(xiàn)在tab-content區(qū)域的內(nèi)容會(huì)出現(xiàn)在頁(yè)面的下方是主要的特征。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>bootstrap頁(yè)簽切換失效</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">頁(yè)簽0</a></li>
   <li ><a href="#tab1" rel="external nofollow" data-toggle="tab">頁(yè)簽1</a></li>
   <li ><a href="#tab2" rel="external nofollow" data-toggle="tab">頁(yè)簽2</a></li>
   <li ><a href="#tab3" rel="external nofollow" data-toggle="tab">頁(yè)簽3</a></li>
   <li ><a href="#tab4" rel="external nofollow" data-toggle="tab">頁(yè)簽4</a></li>
  </ul>
 <div class="tab-content">
  <div class="tab-pane active " id="tab0">
   <div>
    <span>頁(yè)簽0內(nèi)容</span>
   </div>
  </div>
  <div class="tab-pane fade " id="tab1">
   <div>
    <span>頁(yè)簽1內(nèi)容</span>
   </div>
  </div>
  <div class="tab-pane fade " id="tab2">
   <div>
    <span>頁(yè)簽2內(nèi)容,多了一個(gè)結(jié)束標(biāo)簽</span>
   <!-- 頁(yè)簽2內(nèi)容多了一個(gè)結(jié)束標(biāo)簽-->
   </div>
   </div>
  </div>
  <div class="tab-pane fade " id="tab3">
   <div>
    <span>頁(yè)簽3內(nèi)容,出現(xiàn)在頁(yè)簽2下方</span>
   </div>
  </div>
  <div class="tab-pane fade " id="tab4">
   <div>
    <span>頁(yè)簽4內(nèi)容，出現(xiàn)在頁(yè)簽2下方</span>
   </div>
  </div>
 </div>
</div>
</body>
</html>

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

總結(jié)

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

您可能感興趣的文章: