Jump to content
Sign in to follow this  
qRx.

Prośba o edycję kodu na pokazywanie zakładek dla kilku menu jQuery

Recommended Posts

Znalazłem bardzo prosty i lekki kodzik na Zakładki z użyciem jQuery. 

Problem polega na tym, że kiedy wrzuci się dwie albo więcej takich tabelko-zakładek w jednym pliku HTML to nie styka. Moja wiedza z zakresu JS jest zerowa, a naprawa pewnie jest dziecinnie prosta. Chcę po prostu aby po wrzuceniu kilka takich tabelko-zakładek obok siebie każda była w pełni funkcjonalna.

index.html

Share this post


Link to post

Przy tym kodzie jedynym wyjściem jest nazwanie każdego z trzech <ul> inaczej i wklejenie 3x tego samego kodu z lekką edycją.

HTML:

<ul class="tabs-1">
  <li class="tab-link current" data-tab="tab-1-1">Tab One</li>
  <li class="tab-link" data-tab="tab-1-2">Tab Two</li>
</ul>
<div class="tabs-1-content">
  <div id="tab-1-1" class="tab-content current">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div id="tab-1-2" class="tab-content">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
<ul class="tabs-2">
  <li class="tab-link current" data-tab="tab-2-1">Tab One</li>
  <li class="tab-link" data-tab="tab-2-2">Tab Two</li>
</ul>
<div class="tabs-2-content">
  <div id="tab-2-1" class="tab-content current">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div id="tab-2-2" class="tab-content">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
<ul class="tabs-3">
  <li class="tab-link current" data-tab="tab-3-1">Tab One</li>
  <li class="tab-link" data-tab="tab-3-2">Tab Two</li>
</ul>
<div class="tabs-3-content">
  <div id="tab-3-1" class="tab-content current">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div id="tab-3-2" class="tab-content">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

jQ:

$(document).ready(function(){
  $('ul.tabs-1 li').click(function(){
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs-1 li').removeClass('current');
    $('.tabs-1-content .tab-content').removeClass('current');
    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
  });
  $('ul.tabs-2 li').click(function(){
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs-2 li').removeClass('current');
    $('.tabs-2-content .tab-content').removeClass('current');
    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
  });
  $('ul.tabs-3 li').click(function(){
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs-3 li').removeClass('current');
    $('.tabs-3-content .tab-content').removeClass('current');
    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
  });
});

To powinno wystarczyć.

  • Like 1

Share this post


Link to post

dzięki wielkie

w takim razie trochę tego dużo, nie znasz może jakiegoś "wygodniejszego" pluginu?

Edited by QurczaX.

Share this post


Link to post

Nie wiem czy dużo  można by to było skrócić do prawie początkowego kodu. Jak ktoś się znajdzie, to Ci to skróci, a jak nie, to zapraszam na PW

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...