我的网页顶部有一个导航菜单,下拉菜单。例如,nav下的服务页面包含我们其他服务的下拉列表,这些服务转到具有类似标签结构的服务页面:
<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>
我想这样做,以便我可以在我的主页上使用我的achor标签直接链接到我选择的标签3或1或2,以及当我使用选项卡刷新页面时跳转到活动标签。我怎么能用javascript做到这一点?我尝试使用这个代码的哈希检查功能:
$(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');
});
问题是,当我单击第二个选项卡时,它会在第一个选项卡上显示内容...但是选项卡3看起来很好。但是当我点击选项卡3然后返回选项卡2时,选项卡2下没有显示内容。也许有人可以简单地将我的代码用于我想要完成的任务?
PS。我正在使用gumby框架作为我的标签
答案 0 :(得分:0)
首先,$($(this).attr('href'))
无法找到任何内容,因此无论如何都不会有任何标签。
除此之外,哈希链接代码似乎没问题。
我已经重写了代码,以便它现在可以在下面运行。
链接: http://jsfiddle.net/s8Ttm/2/
<强>代码:强>
$(".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');