我正在使用 jQuery 构建导航选项卡,并且正在检测 URL 哈希值以用作在页面加载时转到哪个导航选项卡的参考。例如,当有人访问:example.com/profile.php#media 时,“媒体”选项卡会自动切换到。
我的 jQuery 代码适用于 Safari、Firefox、Chrome 和 Opera,但不适用于任何版本的 Internet Explorer(已测试 IE 6 - 10)。我的代码中是否有任何内容使其与 IE 不兼容?
JavaScript:
$(document).ready(function() {
tab = $('.tab');
function switch_active_tab() {
tab.removeClass('active_tab');
$(this).addClass('active_tab');
}
function hash_detect() {
hash = document.location.hash.replace('#','');
active_tab_id = $('.active_tab').attr('id').replace('-manager', '');
// check if hash value is valid
if( hash == 'pages' || hash == 'media' || hash == 'templates' || hash == 'scripts' ) {
// if hash is not the same as the active tab
if( hash !== active_tab_id ) {
tab.removeClass('active_tab');
$(document.location.hash+'-manager').addClass('active_tab');
}
}
else {
document.location = '#pages';
}
}
function hash_respond() {
hash = document.location.hash.replace('#','');
active_tab_id = $('.active_tab').attr('id').replace('-manager', '');
if( hash !== active_tab_id ) {
document.location = '#' + active_tab_id.replace('-manager', '');
}
}
$(document).ready(hash_detect);
$(window).bind('hashchange', hash_detect);
tab.click(switch_active_tab);
tab.click(hash_respond);
});
对应的HTML:
<div id="tab_wrapper">
<div class="tab active_tab" id="pages-manager">Pages</div>
<div class="tab" id="media-manager">Media</div>
<div class="tab" id="templates-manager">Templates</div>
<div class="tab" id="scripts-manager">Scripts</div>
</div>