URL目標鏈接選項卡 - Zurb基礎選項卡

我目前使用Zurb Foundation Tabs爲小型項目。這些標籤工作的很好，但是當我嘗試將URL定位到特定的標籤頁時，我遇到了一堵牆。我搜索並找到了一個獲取此方法的方法，但修改並將其應用於我的示例時，該方法無效。我收到錯誤：「無法識別的表達式：：第n個孩子」。我如何正確鏈接到Foundation 5中的特定標籤？ DEMO URL目標鏈接選項卡 - Zurb基礎選項卡

JS/JQuery的網址的目標

<script> 
window.navigateTab = function (event) { 
    var url = $(event.target).attr('href'); 
    var target = url.split('#')[1]; 
    if (target.substr(0, 5) == 'panel') { 
     var state = { 
      tab: target.substr(5) 
     }; 
     selectTab("tabs_edit", state.tab); //<-- change the tab 
     history.pushState(state, null, url); //<-- change the url 
     event.preventDefault(); 
    } 
    } 

    window.onpopstate = function (event) { 
     if (event.state != null) { 
      selectTab("tabs_edit", event.state.tab); //<-- change the tab 
     } 
    }; 

    function selectTab(id, tab) { 
     // activate only the right tab: 
     var tab = $("#" + id + "> dl > dd:nth-child(" + tab + ")"); 
     console.log(tab); 
     var a = $("a", tab); 
     target = $('#' + a.attr("href").split('#')[1]); 
     siblings = tab.siblings(); 
     settings = tab.closest('[data-tab]').data('tab-init'); 

     tab.addClass(settings.active_class); 
     siblings.removeClass(settings.active_class); 
     target.siblings().removeClass(settings.active_class).end().addClass(settings.active_class); 
    } 

    $('#menu a').on("click", navigateTab); 
    $(document).foundation(); 
</script>

HTML

 //Target an specific tab: 
     <ul id="menu" class="dropdown"> 
      <li><a href="#panel1a">Tab 1</a></li> 
      <li><a href="#panel2a">Tab 2</a></li> 
      <li><a href="#panel3a">Tab 3</a></li> 
     </ul> 
     //Actual Tabs 
      <dl id="tabs_edit" class="tabs vertical" data-tab> 
       <dd class="active"><a href="#panel1a" onclick="navigateTab(event)">Tab 1</a></dd> 
       <dd><a href="#panel2a" href="#panel2a" onclick="navigateTab(event)">Tab 2</a></dd> 
       <dd><a href="#panel3a" href="#panel3a" onclick="navigateTab(event)">Tab 3</a></dd> 
       <dd><a href="#panel4a" href="#panel4a" onclick="navigateTab(event)">Tab 4</a></dd> 
      </dl> 
      <div class="tabs-content vertical"> 
       <div class="content active" id="panel1a"> 
       <p>Panel 1 content goes here.</p> 
       </div> 
       <div class="content" id="panel2a"> 
       <p>Panel 2 content goes here.</p> 
       </div> 
       <div class="content" id="panel3a"> 
       <p>Panel 3 content goes here.</p> 
       </div> 
       <div class="content" id="panel4a"> 
       <p>Panel 4 content goes here.</p> 
       </div> 
      </div>

來源

2014-01-26 techAddict82

深層鏈接是在基金會4.發現我已經做了修復基金會5並沒有包括的東西是不是作爲聰明但完成工作：

if(window.location.hash){ 
       $('dl.tabs dd a').each(function(){ 
        var hash = '#' + $(this).attr('href').split('#')[1]; 
        if(hash == window.location.hash){ 
         $(this).click(); 
        } 
       }); 
      }

來源

2014-01-26 07:11:41

可能擴展到'$（ 'dl.tabs DD一'）加（$（'ul.tabs禮a'））。add（$（'ol.tabs li a'））' –

我知道這篇文章是ol d但閱讀更成不同的頁面上

工作，他們已經加入Deeplinking功能的基礎上5個文本後只需補充一點：

數據選項=「deep_linking：真正的」

例子：

<dl class="tabs vertical" data-tab data-options="deep_linking:true">

這甚至適用於鏈接到它的不同頁面！

有關其他頁面的鏈接我只是叫panelid

例：

<a href="product-line.php#panel12">

來源

2014-11-06 19:47:16 dimerbox

URL目標鏈接選項卡 - Zurb基礎選項卡

回答

相關問題