Twitter引導轉到嵌套選項卡的特定選項卡

我試圖讓引導程序在頁面加載時跳轉到特定選項卡。儘管我在這裏找到了很少的答案，但在我的具體情況中，我嵌套了使事情複雜化的標籤。現在我已經實施瞭解決方案，如https://stackoverflow.com/a/15060168/1829478，但是我仍然無法正常工作。他提到「兒童應該有班級=」嵌套「，這是什麼意思？Twitter引導轉到嵌套選項卡的特定選項卡

function handleTabLinks() { 
    if(window.location.hash == '') { 
     window.location.hash = window.location.hash + '#_'; 
    } 
    var hash = window.location.hash.split('#')[1]; 
    var prefix = '_'; 
    var hpieces = hash.split('/'); 
    for (var i=0;i<hpieces.length;i++) { 
     var domelid = hpieces[i].replace(prefix,''); 
     var domitem = $('a[href=#' + domelid + '][data-toggle=tab]'); 
     if (domitem.length > 0) { 
      domitem.tab('show'); 
     } 
    } 
    $('a[data-toggle=tab]').on('shown', function (e) { 
     if ($(this).hasClass('nested')) { 
      var nested = window.location.hash.split('/'); 
      window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1]; 
     } else { 
      window.location.hash = e.target.hash.replace('#', '#' + prefix); 
     } 
    }); 
}

來源

2013-05-17 user1829478

添加類=「嵌套」您的嵌套的標籤的鏈接。顯示你的html和鏈接。你在哪裏以及如何調用'handleTabLinks'？ –

我希望這可以幫助別人，這是對嵌套的標籤用哈希一個完整的工作解決方案，使您可以導航到從URL中嵌套的標籤。

要構建這個我用這個代碼引導嵌套的標籤 - >http://jsfiddle.net/simbirsk/RS4Xh/2/和JavaScript從這裏開始 - >https://stackoverflow.com/a/15060168/1829478

<div class="tabbable"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#tab1" data-toggle="tab" onclick="handleTabLinks();">Section 1</a></li> 
     <li><a href="#tab2" data-toggle="tab" onclick="handleTabLinks();">Section 2</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="tab1"> 
      <p>I'm in Section 1.</p> 
     </div> 
     <div class="tab-pane" id="tab2"> 
      <p>Howdy, I'm in Section 2.</p> 
      <div class="tabbable"> 
       <ul class="nav nav-tabs"> 
        <li class="active"><a href="#tab3" data-toggle="tab" class="nested" onclick="handleTabLinks();">Section 3</a></li> 
        <li><a href="#tab4" data-toggle="tab" class="nested" onclick="handleTabLinks();">Section 4</a></li> 
       </ul> 
       <div class="tab-content"> 
        <div class="tab-pane active nested" id="tab3"> 
         <p>I'm in Section 3.</p> 
        </div> 
        <div class="tab-pane nested" id="tab4"> 
         <p>Howdy, I'm in Section 4.</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<script> 
    handleTabLinks(); 
    function handleTabLinks() { 
    if(window.location.hash == '') { 
     window.location.hash = window.location.hash + '#_'; 
    } 
    var hash = window.location.hash.split('#')[1]; 
    var prefix = '_'; 
    var hpieces = hash.split('/'); 
    for (var i=0;i<hpieces.length;i++) { 
     var domelid = hpieces[i].replace(prefix,''); 
     var domitem = $('a[href=#' + domelid + '][data-toggle=tab]'); 
     if (domitem.length > 0) { 
      domitem.tab('show'); 
     } 
    } 
    $('a[data-toggle=tab]').on('shown', function (e) { 
     if ($(this).hasClass('nested')) { 
      var nested = window.location.hash.split('/'); 
      window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1]; 
     } else { 
      window.location.hash = e.target.hash.replace('#', '#' + prefix); 
     } 
    }); 
} 
</script>

來源

2014-01-13 02:30:32 btal

也許我做錯了，但這是行不通的。 – Kez

Twitter引導轉到嵌套選項卡的特定選項卡

回答

相關問題