jqueryを使用してタブにリンクします

Question

jQueryを使用して非表示にする2つのタブがあります。しかし、今私は同じページにあるfilesタブへのリンクを作らなければならない。私はこれで試してみます： <a href='#files' target='_blank'>Files</a>

しかし、選択する方法filesセクション？現在、デフォルトでは.currentクラスのため、applicationセクションです。

$(document).ready(function(){ 
 

 
    $('.app-tabs span').click(function(event){ 
 
    event.preventDefault(); 
 
    var tab_id = $(this).attr('data-tab'); 
 

 
    $('.app-tabs span').removeClass('current'); 
 
    $('.applications-tab-content').removeClass('current'); 
 

 
    $(this).addClass('current'); 
 
    $("#"+tab_id).addClass('current'); 
 

 
    }); 
 
});

.applications-tab-content{ 
 
    display: none; 
 
} 
 
.applications-tab-content.current{ 
 
    display: inherit; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span class="app-tabs" id="app-tabs"> 
 
    <span class="application current" data-tab="application">Data</span> 
 
    <span class="files" data-tab="files">Files</span> 
 
</span> 
 

 
<div id="application" class="applications-tab-content current"> some text here </div> 
 
<div id="files" class="applications-tab-content"> some files here </div>

Answer 1

あなたのクリックハンドラのコードのようにcurrent CSSクラスを設定することにより、タブが表示されるようにする必要があります。そのため、リンクにhrefとtargetの属性を設定するだけでなく、その上にクリックハンドラが必要です。

$(document).on("click", "#id-of-your-link", function (event) { 
    var tab_id = $(this).attr("href"); 
    event.preventDefault(); 

    $('.app-tabs span').removeClass('current'); 
    $('.applications-tab-content').removeClass('current'); 

    $(".app-tabs").find('span[data-tab="' + tab_id.replace(/'#', '') + '"]').addClass('current'); 
    $(tab_id).addClass('current'); 
});