单击主导航到选项卡内容
我不知道这是否可以用html完成，但这是我想要做的。
我使用基金会的制表符，我想通过单击主导航上的链接导航到选项卡的内容中的任何一个。导航中这些子菜单的内容都在同一个页面上。如果你不明白，请告诉我，这样我就可以上传图片或其他东西了。这就是链接到它。
回答 3
Stack Overflow用户
发布于 2013-12-13 14:39:18
编辑1：我有时间研究基金会是如何工作的。这样我就能找到一个更有教养的解决方案。我最初的想法是模仿在css级别上点击项目的效果。
这并不意味着旧的解决方案行不通。事实上，这两种解决方案的最终结果是相同的。我已经测试了旧的和新的解决方案的一个副本的HTML你的网站。
还借此机会补充了一些澄清。
编辑2：我增加了对broser历史的控制。这意味着代码将更改用户看到的url，并将正确处理tha按钮，所有这些都不需要重新加载页面。
路线图
你必须这样做：
- 添加一个id来处理选项卡。
- 创建一个JavaScript函数
selectTab来在它们之间切换。取决于您选择的解决方案。 - 创建一个JavaScript函数
navigateTab，它将调用selectTab，但也更新浏览器历史记录。 - 添加单击事件处理程序。
- 处理后按钮。
那么，让我们先得到共同的部分：
添加一个id来处理选项卡
HTML：
<dl id="LOOK_MY_ID" class="tabs" data-tab>
<dd class="active"><a href="#panel2-1">Tab 1</a></dd>
<dd><a href="#panel2-2">Tab 2</a></dd>
<dd><a href="#panel2-3">Tab 3</a></dd>
<dd><a href="#panel2-4">Tab 4</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="panel2-3">
<p>Third panel content goes here...</p>
</div>
<div class="content" id="panel2-4">
<p>Fourth panel content goes here...</p>
</div>
</div>注意:这是基于基础Tabs示例中显示的HTML。在您的代码中，您将向具有类corporation-frame的div添加id。
创建助手函数
helper函数的目的是使click事件处理程序更容易，同时抽象代码以更改浏览器url。如下所示，我们绕着这条路走。
JavaScript：
function navigateTab(event)
{
var url = $(event.target).attr('href');
var target = url.split('#')[1];
if (target.substr(0, 3) == 'tab')
{
var state = {tab: target.substr(3)};
selectTab("LOOK_MY_ID", state.tab); //<-- change the tab
history.pushState(state, null, url); //<-- change the url
event.preventDefault();
}
}正如您所看到的，它使用event，原因是我们将直接使用这个函数作为单击事件处理程序。另外，要选择的选项卡和要放置的url都来自单击的超链接的href属性。
此技术还允许安全地同时将单击事件处理程序添加到所有链接中。
注意:我们正在通过使用HTML5 5的历史API来更改url。
添加事件处理程序
您需要在链接中添加一个事件处理程序(Foundation将这些添加到幕后的选项卡中，我们将对您的菜单进行模拟)。
有两种方法可以添加这些事件处理程序..。
方法A)
选择锚并通过JavaScript添加事件处理程序：
$('ul.dropdown a').on("click", navigateTab);再简单不过了。
注意:确保使用正确的选择器从菜单中选择超链接。此外，您可能需要(如果您将脚本添加到页面顶部)来使用ready添加以下内容：
$(document).ready(
function()
{
$('ul.dropdown a').on("click", navigateTab);
}
);方法B)
将事件处理程序直接添加到HTML上：
HTML：
<a href="#tab3" onclick="navigateTab(event)">Tab 3</a>注1:如果处理程序上禁用了JavaScript，它将使页面跳转到内容(如果它们是可见的)。这是没有JavaScript你能得到的最好的结果。
处理后按钮
在前面的代码中，我们不仅要更改浏览器中的url，而且还要在页面的导航历史记录中添加一个条目.那么，当用户单击“后退”时会发生什么呢？好的，我们将再次使用HTML5 5的历史API来处理后退按钮。
为了处理这个问题，我们将添加以下代码：
window.onpopstate = function(event)
{
selectTab("LOOK_MY_ID", event.state.tab); //<-- change the tab
};这就是为什么我们不应该从selectTab中更改url，因为如果我们这样做..。我们将无法向后航行！
注意:这段代码不仅负责“后退”按钮，还负责页面内浏览器历史记录中的任何导航。
新解
创建一个JavaScript函数以在它们之间切换
函数selectTab将通过以下方式实现：
- 模仿基金会的工作(基于基金会的实际代码)：
JavaScript：
function selectTab(id, tab)
{
// activate only the right tab:
var tab = $("#" + id + " > dl > dd:nth-child(" + 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);
}旧溶液
创建一个JavaScript函数以在它们之间切换
函数selectTab将通过以下方式实现：
- 使选项卡处于活动状态
- 激活相应的内容
- 使所有其他选项卡不活动
- 使所有其他内容不活动
JavaScript：
function selectTab(id, tab)
{
// activate only the right tab:
$("#" + id + " > dl").children().each
(
function(index, element)
{
if (index == tab)
{
$(element).addClass("active");
}
else
{
$(element).removeClass("active");
}
}
);
// activate only the right content:
$("#" + id + " > div").children().each
(
function(index, element)
{
if (index == tab)
{
$(element).addClass("active");
}
else
{
$(element).removeClass("active");
}
}
);
}Stack Overflow用户
发布于 2013-12-13 14:22:16
从选项卡中移除活动类
$("#tab1").removeClass("active");将类添加到新选项卡
$("#tab2").addClass("active");隐藏第一个面板
$("#panel1").hide();显示新面板
$("#panel2").show();Stack Overflow用户
发布于 2013-12-13 14:14:56
您可以始终使用导航栏上的on click函数将所需选项卡的类设置为“活动”。
$("navelement").on("click", function(){
$("#tab_id").addClass("active");
}https://stackoverflow.com/questions/20568550
复制相似问题
腾讯云开发者
