使用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'); 
});