[AJAX]jQuery podstrony na divach tzw. tab., jak zmodyfikować to? Opcje

[casperii]

Witam, mam kod, który działa, lecz chciałbym go zmodyfikować i nie bardzo wiem jak.

[HTML] pobierz, plaintext 
<style>
.tab {
    display:block;
}
.tab.active,
.tab:hover {
}
.content {
    display:none;
    clear:both;
    background:#FFF;
    padding:20px;
}
.content.active {
    display:block;
}
</style>
 
<script>
    $(function () {
 
      $('[data-tab]').on('click', function (e) {
        $(this)
          .addClass('active')
          .siblings('[data-tab]')
          .removeClass('active')
          .siblings('[data-content=' + $(this).data('tab') + ']')
          .addClass('active')
          .siblings('[data-content]')
          .removeClass('active');
        e.preventDefault();
      });
 
    });
</script>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
         <div data-tab="1" class="tab active"><a href="#">Tab 1</a></div>
         <div data-tab="2" class="tab"><a href="#">Tab 2</a></div>
         <div data-tab="3" class="tab"><a href="#">Tab 3</a></div>
         <div data-tab="4" class="tab"> <a href="#">Tab 4</a></div>
         <div data-tab="5" class="tab"><a href="#">Tab 5</a></div>         
 
          <div data-content="1" class="content active">Tab 1 Content</div>
          <div data-content="2" class="content">Tab 2 Content</div>
          <div data-content="3" class="content">Tab 3 Content</div>
          <div data-content="4" class="content">Tab 4 Content</div>
          <div data-content="5" class="content">Tab 5 Content</div>
[HTML] pobierz, plaintext 

Chciałbym, teraz włożyć część pierwszą divów w dwa divy. Czyli takie coś:

[HTML] pobierz, plaintext 
<div><div>
         <div data-tab="1" class="tab active"><a href="#">Tab 1</a></div>
         <div data-tab="2" class="tab"><a href="#">Tab 2</a></div>
         <div data-tab="3" class="tab"><a href="#">Tab 3</a></div>
         <div data-tab="4" class="tab"> <a href="#">Tab 4</a></div>
         <div data-tab="5" class="tab"><a href="#">Tab 5</a></div>         
</div></div>         
          <div data-content="1" class="content active">Tab 1 Content</div>
          <div data-content="2" class="content">Tab 2 Content</div>
          <div data-content="3" class="content">Tab 3 Content</div>
          <div data-content="4" class="content">Tab 4 Content</div>
          <div data-content="5" class="content">Tab 5 Content</div>
[HTML] pobierz, plaintext 

Proszę teraz o pomoc w JS tak by mi działało. Dodawanie / usuwanie klasy.

[salfunglandyare]

Spróbuj:

[HTML] pobierz, plaintext 
<script>
    $(function () {
 
      $('[data-tab]').on('click', function (e) {
        var that = $(this);
        var parent = that.parent().parent().parent();
        that
          .addClass('active')
          .siblings('[data-tab]')
          .removeClass('active');
        $('[data-content]',parent)
          .removeClass('active')
          .siblings('[data-content=' + that.data('tab') + ']')
          .addClass('active');
        e.preventDefault();
      });
 
    });
</script>
[HTML] pobierz, plaintext 

//edit - poprawka JS - 2 divy

Ten post edytował salfunglandyare 5.05.2015, 21:26:31

[casperii]

Spróbuj:

[HTML] pobierz, plaintext 
<script>
    $(function () {
 
      $('[data-tab]').on('click', function (e) {
        var that = $(this);
        var parent = that.parent();
        that
          .addClass('active')
          .siblings('[data-tab]')
          .removeClass('active');
        $('[data-content]',parent)
          .removeClass('active')
          .siblings('[data-content=' + that.data('tab') + ']')
          .addClass('active');
        e.preventDefault();
      });
 
    });
</script>
[HTML] pobierz, plaintext 

Dzięki, ale podane przez Ciebie rozwiązanie nie skutkuje, jeżeli ten DIV nie jest w tych dwóch DIVACH to divy się przeładowują, czyli tak jak i w moim przykładzie, problem nadal jest jeżeli DIV umieszczę w DIVACH.

[salfunglandyare]

Tak, przed momentem poprawiłem za malo divow w gore, sprawdz jeszcze raz wyedytowane, mozesz tez sprawdzic: https://jsfiddle.net/dnzLp30a/

[casperii]

Dziękuje kolego :-) Zastanawiam się czy dobry sposób obrałem, ponieważ w tych divach będą części formularzy np. div z formularzem danych podstawowych (imię, nazwisko), div z formularzem danych szczegółowych (wykształcenie, wiek). Jak myślisz odbije się to później jakoś na tym JS ?

[salfunglandyare]

to zależy, jeśli będziesz dodawał kolejne dzieci - tak. Tu jest, jak widzisz .parent().parent().parent() co oznacza, że cofa się o 3 stopnie w drzewie DOM. Jeśli dodasz jeszcze kolejnego diva, lub umiescisz div[data-content] poza ostatnim elementem - może to przestać działać. W razie problemów napisz później, gdy będziesz miał w miarę ostateczną wersję. Mógłbyć też nadać tym elementom unikalną klasę i wtedy możnaby wyszukiwać tych elementów zawsze z poziomu korzenia drzewa DOM, wtedy możliwość, że coś się spieprzy będzie mniejsza