jquery - 模拟点击的选项卡式锚点

Question

所以我在jquery中有这个标签的代码，href设置为about，我想做的是在菜单中提供一个链接，点击时触发这个标签，所以http://myurl.com#about

$('#info-nav li').click(function(e) {
    $('#info div').hide();
    $('#info-nav .current').removeClass("current");
    $(this).addClass('current');

    var clicked = $(this).find('a:first').attr('href');
    $('#info ' + clicked).fadeIn('fast');
    e.preventDefault();
 }).eq(0).addClass('current');

Answer 1

我会将处理程序附加到<a>元素而不是<li>

$('#info-nav li a:first').click(function(e) {
    $('#info div').hide();
    $('#info-nav .current').removeClass("current");
    $(this).closest('li').addClass('current');

    var clicked = $(this).attr('href');
    $('#info ' + clicked).fadeIn('fast');
    e.preventDefault();

}).eq(0).closest('li').addClass('current');

这样在DOMready事件中我会读取 URL 中的哈希（带有location.hash），我会在其 href 属性等于该哈希的元素上触发click事件（或带有 的处理程序）.triggerHandler()

$(function() {
    var hash = location.hash, tgt = $('a[href="' +  hash + '"]');
    if (hash !== '' && tgt.length) {
       tgt.trigger('click');
    }
});

在事件上调用相同的函数window.onhashchange（如果您提供的链接实际上并未更改整个页面）

$('window').bind('hashchange', function() {
    var hash = location.hash, tgt = $('a[href="' +  hash + '"]');
    if (hash !== '' && tgt.length) {
       tgt.trigger('click');
    }
});