使用jquery链接到标签

Question

我有两个选项卡，我隐藏和显示使用jQuery。但现在我必须链接到files选项卡，它位于同一页面中。我试试这个： <a href='#files' target='_blank'>Files</a>

但是如何使被选files一节？现在，这是application部分，因为默认为.current。

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