0

2 つのタブを作成し、切り替え可能にしました。Tab1 には、Tab2 の記事への 3 つのアンカー リンクを配置しました。tab1 のリンクをクリックしてから、tab2 を開いてアンカーに移動するにはどうすればよいですか? 誰かが私を助けることができれば。ありがとう。

jsfiddle オンライン サンプル

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();
    });
4

1 に答える 1

0
<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();
     }
});
于 2013-05-31T11:03:05.293 に答える