我无法使jQuery hashchange功能正常工作,这不是我以前用过的东西,我无法弄清楚为什么它不能正常工作。
我有一个包含6个部分的“关于”页面,每个部分都通过子菜单显示/隐藏,因此一次只显示一个部分。但我想将哈希附加到这些哈希,以便它们可以链接到其他页面。这是我的代码,我将解释我遇到的问题:
jQuery的:
$(document).ready(function(){
$('.about').hide();
$('#section01').show();
$(function(){
$(window).on('hashchange', function(){
var hash = window.location.hash;
$('.sub-menu').each(function(){
$('.about').hide();
$('#section'+$(this).attr('hook')).fadeIn();
return false;
});
});
});
$(window).hashchange();
});
HTML:
<div id="content-wrap">
<div id="sub-menu">
<li id="sub-menu-01" class="sub-menu" hook="01"><a href="#about01">SECTION01</a></li>
<li id="sub-menu-02" class="sub-menu" hook="02"><a href="#about02">SECTION02</a></li>
<li id="sub-menu-03" class="sub-menu" hook="03"><a href="#about03">SECTION03</a></li>
<li id="sub-menu-04" class="sub-menu" hook="04"><a href="#about04">SECTION04</a></li>
<li id="sub-menu-05" class="sub-menu" hook="05"><a href="#about05">SECTION05</a></li>
<li id="sub-menu-06" class="sub-menu" hook="06"><a href="#about06">SECTION06</a></li>
</div>
<div id="section01" class="about">
CONTENT GOES HERE
</div>
<div id="section02" class="about">
CONTENT GOES HERE
</div>
<div id="section03" class="about">
CONTENT GOES HERE
</div>
<div id="section04" class="about">
CONTENT GOES HERE
</div>
<div id="section05" class="about">
CONTENT GOES HERE
</div>
<div id="section06" class="about">
CONTENT GOES HERE
</div>
</div>
因此,点击.sub-menu
会成功添加哈希值#about01
#about02
等。但相对于相关部分被淡化,它只会在#section01
和{I}中逐渐消失无法理解为什么
在我介绍hashchange之前,我已经很好地使用了这个函数,但是现在相关部分没有显示,只要始终#section01
,无论你点击哪个.sub-menu
。
答案 0 :(得分:0)
我会使用.attr hook
和data-hook
而不是.data
。那不是问题。
你实际上并没有比较“hook”值与哈希匹配。
if ($(this).attr('hook') === hash.replace('#about', '')) {
如果哈希是空的,我还需要显示第一部分(我想),但我相信你可以解决这个问题。