gistfile1.txt

$(document).ready(function() {
  $('#show-tab').click(function(){
    var current = $(this);
     var siblings = current.siblings();
     siblings.parent('li').removeClass('active');
     siblings.attr({'aria-selected': false});
     current.parent('li').addClass('active');
     current.attr({'aria-selected': true});
  });
});

<ul class="tabs" data-tab role="tablist">
  <% if profile.file_assets.videos.any? && profile.premium? %>
    <li class="tab-title active" role="presentational" ><a href="#panel2-1 #show-tab" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Videoanzeige</a></li>
  <% end %>
  <% if profile.file_assets.fotos.any? && profile.premium? %>
    <li class="tab-title" role="presentational" ><a href="#panel2-2 #show-tab" role="tab" tabindex="0"aria-selected="false" controls="panel2-2">Fotoanzeige</a></li>
  <% end %>
</ul>
<div class="tabs-content">
  <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1" >
    <%= render partial: "profiles/profile_responsive/multimedia/video",      locals: { profile: @profile } %>
  </section>
  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2" >
    <%= render partial: "profiles/profile_responsive/multimedia/image_slider",      locals: { profile: @profile } %>
  </section>
</div>


// First solution which works (its not nice though)

// Show first tab.
function showFirstTab() {
  $('#panel2-2').removeClass('active');
  $('#panel2-1').addClass('active');
}

// Show second tab.
function showSecondTab() {
  $('#panel2-1').removeClass('active');
  $('#panel2-2').addClass('active');
}