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

使用jquery链接到选项卡

1 个答案: