無法使用Tab鍵在下拉（引導程序）內工作？

我試圖嵌套下拉列表中的標籤，似乎無法讓它正常工作。我可以讓標籤在第一次點擊時呈現，但當我返回並嘗試再次點擊它時不會。我創建了一個bl.ocks http://bl.ocks.org/caseymm/6090448 無法使用Tab鍵在下拉（引導程序）內工作？

<div class="tab-pane" id="pills-basic"> 
     <div class="tabbable"> 
      <div class="btn-group"> 
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
       Action 
        <span class="caret"></span> 
      </a> 

      <ul class="dropdown-menu" > 
       <li><a href="#APS" data-toggle="tab">APS</a></li> 
            <li><a href="#Cherokee" data-toggle="tab">Cherokee County</a></li> 
            <li><a href="#Clayton" data-toggle="tab">Clayton County</a></li> 
       <li><a href="#Cobb" data-toggle="tab">Cobb County</a></li> 
            <li><a href="#DeKalb" data-toggle="tab">DeKalb County</a></li> 
            <li><a href="#Fayette" data-toggle="tab">Fayette County</a></li> 
            <li><a href="#Fulton" data-toggle="tab">Fulton County</a></li> 
            <li><a href="#Gwinnett" data-toggle="tab">Gwinnett County</a></li> 
            <li><a href="#Henry" data-toggle="tab">Henry County</a></li> 
            <li><a href="#Marietta" data-toggle="tab">Marietta City</a></li> 

         </ul> 
        </div> 

      <div class="tab-content"> 
            <div id="Home" class="tab-pane active"> 
             Some stuff. 
            </div> 
       <div id="Cherokee" class="tab-pane"> 
             <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1376" data-rnkw-id="930926"></div> 
             <a href="http://www.ranker.com/list/cherokee-county/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Cherokee County</a> 
            </div> 
            <div id="Cobb" class="tab-pane"> 
             <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1510" data-rnkw-id="930947"></div> 
             <a href="http://www.ranker.com/list/cobb-county/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Cobb County</a> 
            </div> 
            <div id="DeKalb" class="tab-pane"> 
             <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1376" data-rnkw-id="930937"></div> 
             <a href="http://www.ranker.com/list/dekalb-county/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">DeKalb County</a> 
       </div> 
            <div id="Gwinnett" class="tab-pane"> 
             <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1309" data-rnkw-id="930945"></div> 
             <a href="http://www.ranker.com/list/gwinnett-county/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Gwinnett County</a> 
            </div> 
            <div id="Marietta" class="tab-pane"> 
             <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1242" data-rnkw-id="930911"></div> 
             <a href="http://www.ranker.com/list/marietta-city/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Marietta City</a> 
            </div> 
            <div id="APS" class="tab-pane"> 
             <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1912" data-rnkw-id="931127"></div> 
             <a href="http://www.ranker.com/list/atlanta-public-schools-v1/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Atlanta Public Schools</a> 
            </div> 
            <div id="Fayette" class="tab-pane"> 
             <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1108" data-rnkw-id="931534"></div> 
             <a href="http://www.ranker.com/list/fayette-county-public-schools/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Fayette County Public Schools</a> 
            </div> 
            <div id="Henry" class="tab-pane"> 
             <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1242" data-rnkw-id="931537"></div> 
             <a href="http://www.ranker.com/list/henry-county-school-system/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Henry County School System</a> 
            </div> 
            <div id="Fulton" class="tab-pane"> 
             <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="907" data-rnkw-id="931543"></div> 
             <a href="http://www.ranker.com/list/fulton-county/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Fulton County</a> 
            </div> 
            <div id="Clayton" class="tab-pane"> 
             <div class="rnkw-lists" data-rnkw-width="100%" data-rnkw-height="1711" data-rnkw-id="931546"></div> 
             <a href="http://www.ranker.com/list/clayton-county-public-schools/atlantajournalconstitution" style="display:block; width:100%; padding-top:7px; font-size:12px; text-align:center;">Clayton County Public Schools</a> 
            </div> 
      </div><!-- /.tab-content --> 


    </div> 

    </div>

來源

2013-07-26 user1855009

一些關於你的標記是不完全正確，也或許標籤（）和下拉（）發生碰撞，從而使活動類不被從列表中刪除項目。

在任何情況下，你可以用此位的jQuery錘成形狀：

$('#pills-basic a[data-toggle="tab"]').on('shown', function (e) { 
    $('#pills-basic .dropdown-menu li.active').removeClass('active'); 
    $(this).parent('li').addClass('active'); 
})

http://jsfiddle.net/isherwood/28qCe/5/

來源

2013-07-26 18:29:36 isherwood

無法使用Tab鍵在下拉（引導程序）內工作？

回答

相關問題