Javascript 将主页上的锚定标记链接到特定选项卡
我的网页顶部有一个带有下拉菜单的导航菜单。例如,nav下的service page(服务页面)有一个其他服务的下拉列表,该下拉列表指向具有如下选项卡结构的service page(服务页面):Javascript 将主页上的锚定标记链接到特定选项卡,javascript,jquery,html,css,tabs,Javascript,Jquery,Html,Css,Tabs,我的网页顶部有一个带有下拉菜单的导航菜单。例如,nav下的service page(服务页面)有一个其他服务的下拉列表,该下拉列表指向具有如下选项卡结构的service page(服务页面): <section class="tabs"> <ul class="tab-nav"> <li class="active"><a href="#first">First Tab</a></li>
<section class="tabs">
<ul class="tab-nav">
<li class="active"><a href="#first">First Tab</a></li>
<li><a href="#second">Second Tab</a></li>
<li><a href="#third">Third Tab</a></li>
</ul>
<div class="tab-content">
<p>Here's the first piece of content</p>
</div>
<div class="tab-content active">
<p>My tab is active so I'll show up first! Inb4 tab 3!</p>
</div>
<div class="tab-content">
<p>Don't forget about me! I'm tab 3!</p>
</div>
</section>
问题是,当我单击第二个选项卡时,它会显示第一个选项卡上的内容。。。但是表3看起来不错。但当我单击选项卡3,然后返回到选项卡2时,选项卡2下不会显示任何内容。也许有人可以简单地用我的代码来实现我的目标
另外,我正在为我的标签使用gumby框架首先,$$this.attr'href'找不到任何东西,因此所有标签都不会工作
除此之外,哈希链接代码似乎还不错
我已经重写了代码,以便它现在可以在下面工作
链接:
代码:
谢谢,当我在主页上时效果很好,但是当我在“服务”选项卡页面上时,这些选项卡工作正常,但是我的导航下拉菜单不会将我带到我单击的任何其他选项卡。例如,下拉菜单适用于主页和任何其他没有选项卡的页面,但当我在有选项卡的页面上时,下拉菜单将不起作用。@user2241963您能告诉我在哪里发生这种情况吗?i、 e此主页/服务页面确定的位置。为了简单起见,这里是我的网站简而言之:三个页面:主页、服务页面和联系人页面。这三个按钮都有相同的导航栏按钮,分别是主页、服务、联系人,服务按钮有一个下拉菜单,链接到服务页面上的选项卡。在服务页面本身上有三个选项卡。当我在服务页面上时,我单击下拉菜单导航到其他选项卡,而不仅仅是单击选项卡本身,什么都不会发生。只有当我在“主页”和“联系人”上时,“导航”菜单才会将我带到“服务”页上的选项卡。@user2241963对不起,我的意思是像一个活生生的示例,或者至少是导航的html结构
$(function () {
$(".tab-content").hide().first().show();
$(".tab-nav li:first").addClass("active");
$(".tab-nav a").on('click', function (e) {
e.preventDefault();
$(this).closest('li').addClass("active").siblings().removeClass("active");
$($(this).attr('href')).show().siblings('.tab-content').hide();
});
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');
});
$(".tab-nav a").bind('click', function (e) {
e.preventDefault();
$(this).parents('li').addClass("active").siblings().removeClass("active");
$('.tab-content').removeClass('active').hide();
console.log($('.tab-content:eq('+$(this).index()+')'));
$('.tab-content:eq('+$(this).parents('li').index()+')').addClass('active').show();
});
$('.tab-nav a').first().click();
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');