Bootstrap選項卡不適用於Firebug

下面是一個使用Bootstrap 2.0選項卡的小型jQuery測試程序。奇怪的是，如果你在Firefox中運行它，它就像預期的那樣工作。雖然如果你打開Firebug，標籤停止工作！是否有一些我錯過的事件處理？正如你可以想象的那樣，它正在調試我的項目非常具有挑戰性！Bootstrap選項卡不適用於Firebug

（如果你想運行這一點 - 將文件複製到你的Web根目錄，並修改路徑對jQuery和Bootstrap文件 - 。這是我上的jsfiddle找到一個例子吧，在Firefox訪問HTML文件）

製表的test.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="./js/jquery-1.9.1.js"type="text/javascript" charset="utf-8"></script> 
<script src="./bootstrap/dist/js/bootstrap.min.js"></script> 
<script src="./bootstrap/assets/js/holder.js"></script> 
<link href="./bootstrap/dist/css/bootstrap.css" rel="stylesheet"> 
<script type="text/javascript"> 

    $(document).ready(function(){ 
     $("#myTab a").click(function(e){ 
      e.preventDefault(); 
      $(this).tab('show'); 
     }); 
    }); 
</script> 
<style type="text/css"> 
    .bs-example{ 
     margin: 20px; 
    } 
</style> 
</head> 
<body> 
    <div class="bs-example"> 
    <ul class="nav nav-tabs" id="myTab"> 
     <li class="active"><a href="#sectionA">Section A</a></li> 
     <li><a href="#sectionB">Section B</a></li> 
     <li class="dropdown"> 
      <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"> </b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#dropdown1">Dropdown1</a></li> 
       <li><a href="#dropdown2">Dropdown2</a></li> 
      </ul> 
     </li> 
    </ul> 
    <div class="tab-content"> 
     <div id="sectionA" class="tab-pane fade in active"> 
      <h3>Section A</h3> 
     <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p> 
     </div> 
     <div id="sectionB" class="tab-pane fade"> 
      <h3>Section B</h3> 
     <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p> 
     </div> 
     <div id="dropdown1" class="tab-pane fade"> 
      <h3>Dropdown 1</h3> 
     <p>WInteger convallis, nulla in sollicitudin placerat, ligula enim auctor lectus, in mollis diam dolor at lorem. Sed bibendum nibh sit amet dictum feugiat. Vivamus arcu sem, cursus a feugiat ut, iaculis at erat. Donec vehicula at ligula vitae venenatis. Sed nunc nulla, vehicula non porttitor in, pharetra et dolor. Fusce nec velit velit. Pellentesque consectetur eros.</p> 
     </div> 
     <div id="dropdown2" class="tab-pane fade"> 
      <h3>Dropdown 2</h3> 
      <p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

來源

2014-10-28 user1072910

嘗試從firefox分離firebug。 – 2014-10-28 07:17:54

在Win7上使用Firefox 33.0.1 + Firebug 2.0.4（從CDN獲取JS和CSS文件）適用於我。你使用哪個版本的Firefox和Firebug？ – 2014-10-28 08:24:05

我在FF 33.0和Mac上的Firebug 2.0.4 .... hmmmmm。讓我試試@ Cerlin建議分離螢火蟲。 – user1072910 2014-10-28 16:35:51

無需在JavaScript中顯式調用標籤。它默認使用Bootstrap。它適用於沒有JavaScript代碼的我。

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#myTab a").click(function(e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
    }); 
}); 
</script>

來源

2014-10-28 08:43:30 Swati

我不確定我的理解。在每個選項卡選擇我需要做別的 - 但在測試程序中，我只是顯示內容。這是你的意思嗎？ – user1072910 2014-10-28 16:45:48

我已將您的代碼複製到本地，並從中刪除了Javascript代碼。它也爲我打開了螢火蟲。 – Swati 2014-10-29 04:07:03

快速問題 - 你在Mac上嗎？ – user1072910 2014-10-30 06:02:09

我在Mac上，使用OS X雪豹10.8.5（老我知道，但是這需要一個工作的計算機的工作），火狐33.1，螢火蟲2.0.6和有同樣的問題：在新啓動Firefox後，引導標籤工作正常，直到我打開螢火蟲，然後停止工作。我必須重新啓動瀏覽器以使標籤再次運行。

一切工作正常（具有完全相同的引導版本），直到最近的Firefox更新（不知道哪一個）。

令人沮喪。

：wq

來源

2014-11-24 12:21:52 familymangreg

我在原來的帖子後做了更多的調查。它似乎是Mac特定的。我回到Firefox 32.0.3，問題消失了。我在FF 33.1.0上再次嘗試，並且仍然存在問題。我還沒有檢出33.1.1。所以回到FF 32.0.3，Firebug會再次爲你工作。 – user1072910 2014-11-26 00:09:33

非常感謝你。降級到32.0.3也爲我解決了這個問題。 – familymangreg 2014-11-27 09:51:55

我在MacOS上升級到Yosemite，現在使用Firefox 36.0和Firebug 2.0.8，我可以使用Bootstrap選項卡進行調試。 – user1072910 2015-02-27 06:33:38

Bootstrap選項卡不適用於Firebug

回答

相關問題