Question

我的网站上有一些基于a template的信息标签。标签有一些锚点example.com/#convey，但当我尝试使用#anchor直接链接到某个标签时 - 没有任何反应，因为标签使用的是JS。

JS：

 /* fading the content in using a sub-menu */
    $('.content-fade-menu a').click(function(){
        var href = $(this).attr('href');
        var target = $('.content-fade').find(href);
        $('.content-fade-menu a').removeClass('active');
        $(this).addClass('active');
        $('.content-fade .content-fade-panel').hide();
        $(target).fadeIn('fast');
        return false;
    });

菜单的HTML：

<ul class="sub-menu content-fade-menu">
<li><a href="#pi" class="">Personal Injury</a></li>
<li><a href="#employment" class="active">Employment</a></li>
</ul>

一个非活动标签和一个有效标签的HTML：

<div class="content-fade">
<div class="content-fade-panel" id="pi" style="display: none;">
Non-active tab
</div> 
<div class="content-fade-panel" id="employment" style="display: block;">
Active tab
</div> 
</div>

我需要做些什么才能使example.com/#anchor之类的链接发挥作用？

Answer 1

好的，我找到了答案。

//Take #anchor from url and find right block
    var loc = window.location.hash;
    if (loc != "") {
    var href = loc;
    var target = $('.content-fade').find(href);

//Unactivate first tab
    $('.content-fade-menu a').removeClass('active');

//Activate right tab
    $('.content-fade-menu a[href="'+href  +'"]').addClass('active');
    $('.content-fade .content-fade-panel').hide();
    $(target).fadeIn('fast');

//Scroll to the h3 of the activated block
     var zagolovok = $(target).find('h3');
    $('html, body').animate({scrollTop: $(zagolovok).offset().top}, 300);
    }

这就是全部。

如何使用#anchors直接链接到标签（用JS制作）？

1 个答案: