頁簽0內(nèi)容
頁簽1內(nèi)容
頁簽2內(nèi)容,多了一個結(jié)束標(biāo)簽
頁簽3內(nèi)容,出現(xiàn)在頁簽2下方
頁簽4內(nèi)容，出現(xiàn)在頁簽2下方
BootStrap頁簽切換失效的解決方法
概述
創(chuàng)新互聯(lián)建站服務(wù)項目包括羅城網(wǎng)站建設(shè)、羅城網(wǎng)站制作、羅城網(wǎng)頁制作以及羅城網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，羅城網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到羅城省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
bootstrap開發(fā)標(biāo)簽頁時，標(biāo)簽頁顯示正常，但點擊時候?qū)?yīng)內(nèi)容區(qū)域沒有變化。
具體癥狀與解決方案
1.標(biāo)簽頁UI出現(xiàn)，但點擊無反應(yīng)，標(biāo)簽頁UI并未隨點擊進(jìn)行切換
先檢查bootstrap.css，jQuery.js和bootstrap.js是否有正確引入，并保證引入順序jQuery在前，bootstrap.js在后。再檢查代碼中是否有其他報錯中止了JS。
2.標(biāo)簽頁可以隨點擊進(jìn)行切換，但點擊后前面幾條內(nèi)容可以切換，但后面幾條內(nèi)容切換失敗
產(chǎn)生原因：
內(nèi)容區(qū)域的html結(jié)構(gòu)出現(xiàn)錯誤，在單個tab中多寫了一個div的結(jié)束標(biāo)簽，使得tab-content這一div過早的關(guān)閉，剩下的tab-pan則與原來的tab-content變成了平級的關(guān)系而不是父子關(guān)系。仔細(xì)觀察，點擊之后原來應(yīng)該出現(xiàn)在tab-content區(qū)域的內(nèi)容會出現(xiàn)在頁面的下方是主要的特征。
bootstrap頁簽切換失效
審查元素時看到tab-pan與tab-content在同級中出現(xiàn)是最明顯的特征。這時候只需要查看最后一個能生效點擊的頁簽中的代碼(示例中為tab2)，將多余的div結(jié)束標(biāo)簽去掉即可。
總結(jié)
這種錯誤易除了剛接觸bootstrap的開發(fā)者容易遇見之外，使用模板引擎配合bootstrap進(jìn)行開發(fā)的過程中，頁面結(jié)構(gòu)嵌套關(guān)系比較復(fù)雜的時候也容易產(chǎn)生這類錯誤，但清楚錯誤產(chǎn)生原理還有分析方法之后，解決起來并不困難。
網(wǎng)站標(biāo)題：BootStrap頁簽切換失效的解決方法
本文網(wǎng)址：http://m.jiaotiyi.com/article/igcogj.html