如何解決bootstrap導航條不跳轉的問題

bootstrap導航條不跳轉的解決辦法：1、使用“$('#myTabs a').click(function (e){...}”方式；2、使用“data-toggle”標記；3、通過“window.location”實現跳轉即可。



本教程操作環境：Windows7系統、bootstrap3版，該方法適用於所有品牌電腦。

推薦：《bootstrap視訊教程》

最近在學習bootstrap，準備做一個個人網站的主頁。前端就準備採用bootstrap來做了，因為，bootstrap確實很漂亮，也很流行，有了問題也方便通過百度或者谷歌找到答案。

我的頁面大概是這個樣子:



主要就是採用bootstrap的navbar元件設計了一個自己的導航條，以為很簡單的事情，結果最後導航條沒有工作。

問題：

1、導航條不按照點選切換相應tab的active狀態。連結能夠正常跳轉，但是始終是Home處於啟用狀態。

對於這個問題首先百度了一下，可能的原因在於jquery庫引用不正確，jquery庫的引用一定要在bootstrap庫之前，因為bootstrap依賴jquery庫工作。

但是我檢查了一遍自己的程式碼後，發現我的引用順序並沒有問題。

接下來，我在bootstrap官網中找到這樣一句話（我使用的是bootstrap3）



截圖地址：https://v3.bootcss.com/javascript/#tabs

這裡表明有兩種方法可以啟用tab，第一種是通過如下的javascript程式碼：

1

2

3

$('#myTabs a').click(function (e) {

  e.preventDefault()

  $(this).tab('show')})

第二種是通過"data-toggle"標記

1

2

3

4

5

6
 

• 
  
  
   

•     

• Home

  
  
  
   

•     

• Profile

  
  
  
   

•     

• Messages

  
  
  
   

•     

• Settings

  
  
  
   

•   

採用任意一種方法後，navbar active狀態不隨點選改變的問題解決了，但是發現導航條中也就是

標記中所有標記的href屬性都失效了，後來也是一頓搜尋，發現，bootstrap把href屬性當id處理，只連結到當前頁面的位置，而外部跳轉連結被遮蔽。

參考:(https://stackoverflow.com/questions/16785264/jquery-syntax-error)

2、解決了第一項問題後，結果發現navbar中的連結無法跳轉到外部連結。

正如前面提到，外部連結被遮蔽，後來只好想到通過js來實現跳轉，因此，我把navbar的啟用程式碼修改了一下，通過window.location來實現跳轉。

1

2

3

4

5

6

7

$(function () {

      $("#myBar li").click(function (e) {

        e.preventDefault()

        $(this).tab('show')     

        window.location.href = 'http://localhost:3000' + $(this).children('a').attr('href')

      })

 })