2013-07-30 52 views
0

我有一個頁面,兩個引導tabbable。在每一個tabbable片設定爲主動引導與多個tabbable和滾動間諜不工作

這裏是我的標記:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
     <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
    </head> 

    <body data-spy="scroll"> 
     <div> 
      <ul class="nav nav-tabs" id="tablist-1"> 
       <li><a href="#software-tab-1" data-toggle="tab">software 1</a></li> 
       <li class="active"><a href="#hardware-tab-1" data-toggle="tab">hardware 1</a></li> 
      </ul> 

      <div class="tab-content"> 
       <div class="tab-pane" id="software-tab-1">software 1</div> 
       <div class="tab-pane active" id="hardware-tab-1">hardware 1</div> 
      </div> 
     </div> 

     <div> 
      <ul class="nav nav-tabs" id="tablist-2"> 
       <li class="active"><a href="#software-tab-2" data-toggle="tab">software 2</a></li> 
       <li><a href="#hardware-tab-2" data-toggle="tab">hardware 2</a></li> 
      </ul> 

      <div class="tab-content"> 
       <div class="tab-pane active" id="software-tab-2">software 2</div> 
       <div class="tab-pane" id="hardware-tab-2">hardware 2</div> 
      </div> 
     </div> 

    </body> 
</html> 

如果頁面加載,最後tabbable的唯一的標籤被激活。第一個tabbable的活動狀態丟失。

將這兩個選項卡設置爲用javascript激活也不起作用。

<script> 
    $(document).ready(function(){ 
     $('#tablist-1 a:first').tab('show'); 
     $('#tablist-2 a:first').tab('show'); 
    }); 
</script> 

如果我從身體標記它的工作原理去除data-spy="scroll"

如何獲得scrollspy和多個標籤工作?

回答