URL目标链接选项卡-Zurb基础选项卡

Question

我目前正在将Zurb Foundation Tabs用于小型项目。 选项卡效果很好，但尝试将目标网址指向特定选项卡时遇到了麻烦。 我搜索并找到了一种实现此目标的方法，但是在将其修改并应用于我的示例时，该方法不起作用。 我收到错误消息：“无法识别的表达式：：nth-​​child”。 如何正确链接到Foundation 5中的特定选项卡的链接？ 演示

目标网址的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>

Answer 1

我知道这篇文章很旧，但是在阅读了基础5的更多内容后，他们添加了适用于不同页面的Deeplinking功能

只需添加：

data-options =“ deep_linking：true”

例：

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

甚至可以在链接到它的不同页面上使用！

对于其他页面上的链接，我只是将其称为panelid

例：

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

Answer 2

深层链接是Foundation 5所没有包括的，而Foundation 4中却没有。我做了一个修复，它不那么聪明，但是可以完成工作：

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