mistery_girl mistery_girl - 4 months ago 8x
jQuery Question

Link to tab using jquery

I have two tabs that I hide and show using jQuery. But now I have to make a link to

tab which is in the same page. I try with this:
<a href='#files' target='_blank'>Files</a>

But how to make to be selected
section? Now, it's
section because of class
which is by default.


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

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



display: none;
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>

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


You need to make the tab visible by setting the current css class like in your click handler code. So, instead of only set the href and target attributes in your link, you need a click handler on it as well.

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

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

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