Question

我做了两个标签，可以互相切换，在Tab1上我给Tab2文章放了3个锚链接。如何单击tab1的链接，然后tab2打开并转到锚点？如果有人可以帮助我感谢。

HTML

<div class="wrap">
    <a href="#tab1" class="active">Tab1</a>
    <a href="#tab2">Tab2</a>
    <div id="tab1">

        <a href="#anchor_a" >ANCHOR POINT A</a>
        <a href="#anchor_b">ANCHOR POINT B</a>
        <a href="#anchor_c">ANCHOR POINT C</a>

    </div>
    <div id="tab2">
        <div id="anchor_a"></div>
                <div id="anchor_b"></div>
                <div id="anchor_c"></div>
        </div>
 </div>

JS

$('.wrap > div').eq(1).hide();
    $('.wrap > a').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        $('.wrap > div').hide().filter(this.hash).show();
    });

Answer 1

<div class="wrap">  
    <div id="tabs">
        <a href="#tab1" class="active">Tab1</a>
        <a href="#tab2">Tab2</a>
    </div>

    <div class="tabs-data">
        <div id="tab1">
            <a href="#anchor_a" >ANCHOR POINT A</a>
            <a href="#anchor_b">ANCHOR POINT B</a>
            <a href="#anchor_c">ANCHOR POINT C</a>
        </div>
        <div id="tab2">
            <div id="anchor_a"></div>
            <div id="anchor_b"></div>
            <div id="anchor_c"></div>
        </div>
     </div>
</div>

JS：

$(document).on('click', '#tabs a', function(e){
    e.preventDefault();
    if ($(this).hasClass('active')){
        return false;
    } else {
        var wrap = $(this).parents('.wrap');
        $(this).parent().find('a').removeClass('active');
        $(this).addClass('active');
        wrap.find('.tabs-data > div').hide();
        wrap.find('.tabs-data ' + $(this).attr('href')).show();
     }
});

jQuery选项卡切换和锚链接

1 个答案: