javascript - 查询 : href#hash not working

Question

我有以下选项卡情况，当我点击选项卡时，它会转到相应的选项卡，但是 URL 没有改变到 #foo 或 #bar，我的意思是它应该更改为 abc.com/1#foo

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-left tabs" data-tabgroup="pet-details-group">
        <li><a href="#foo">Foooo</a>
        </li>
        <li><a href="#bar">Barrr</a>
        </li>
    </ul>
</div>

<div class="container no-padding tabgroup" id="pet-details-group">
    <div id="foo">
        Foooooo
    </div>
    <div id="bar">
        Barrrr
    </div>
</div>

这是 Jquery :

$(document).ready(function() {
    $('.tabgroup > div').hide();
    $('.tabgroup > div:first-of-type').show();
    $('.tabs a').click(function(e){
        e.preventDefault();
        var $this = $(this),
                tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
                others = $this.closest('li').siblings().children('a'),
                target = $this.attr('href');
        others.removeClass('active_link');
        $this.addClass('active_link');
        $(tabgroup).children('div').hide();
        $(target).show();

    });
});

我不知道我错过了什么。

Answer 1

好的，请尝试以下操作:

$('.tabgroup > div').hide();
    $('.tabgroup > div:first-of-type').show();
    $('.tabs a').click(function(e){
        var $this = $(this),
            tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
            others = $this.closest('li').siblings().children('a'),
            target = $this.attr('href');
        others.removeClass('active_link');
        $this.addClass('active_link');
        $(tabgroup).children('div').hide();
        $(target).show();
    }).filter('[href="' + location.hash + '"]').trigger('click');