[英]URL Target Link Tab - Zurb Foundation Tabs
I am currently using Zurb Foundation Tabs for small project. 我目前正在将Zurb Foundation Tabs用于小型项目。 The tabs work great but I am running into a wall when trying to url target to an specific tab. 选项卡效果很好,但尝试将目标网址指向特定选项卡时遇到了麻烦。 I searched and found a method for getting this achived but when modifying and applying it to my example it is not working. 我搜索并找到了一种实现此目标的方法,但是在将其修改并应用于我的示例时,该方法不起作用。 I am getting error: “unrecognized expression: :nth-child”. 我收到错误消息:“无法识别的表达式::nth-child”。 How can I properly url link to a specific tab in Foundation 5? 如何正确链接到Foundation 5中的特定选项卡的链接? DEMO 演示
JS/JQuery for url target 目标网址的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 的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>
I know this post is old but after reading more into the foundation 5 text they've added Deeplinking features that works on different pages 我知道这篇文章很旧,但是在阅读了基础5的更多内容后,他们添加了适用于不同页面的Deeplinking功能
Just add this : 只需添加:
data-options="deep_linking:true" data-options =“ deep_linking:true”
Example: 例:
<dl class="tabs vertical" data-tab data-options="deep_linking:true">
This even works on different pages linking to it! 甚至可以在链接到它的不同页面上使用!
For link on other pages I just called the panelid 对于其他页面上的链接,我只是将其称为panelid
Example: 例:
<a href="product-line.php#panel12">
Deep linking is something that Foundation 5 has not included as found in Foundation 4. I have made a fix that is not as clever but gets the job done: 深层链接是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();
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.