Почему второй таб не работает?

@Prorok256 · Регистрация: 23.11.2015

Студворк — интернет-сервис помощи студентам

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 (function (jQuery) {
    jQuery.fn.lightTabs = function (options) {
 
      var createTabs = function () {
        tabs = this;
        i = 0;
 
        showPage = function (i) {
          $(tabs).children("div").children("div").hide();
          $(tabs).children("div").children("div").eq(i).fadeIn("900");
          $(tabs).children("ul").children("li").removeClass("active-tab");
          $(tabs).children("ul").children("li").eq(i).addClass("active-tab");
        }
 
        showPage(0);
 
        jQuery(tabs).children("ul").children("li").each(function (index, element) {
          $(element).attr("data-page", i);
          i++;
        });
 
        jQuery(tabs).children("ul").children("li").click(function () {
          showPage(parseInt($(this).attr("data-page")));
        });
      };
      return this.each(createTabs);
    };
  })(jQuery);
  
  jQuery(".main-tabs").lightTabs(); 
 jQuery(".main-tabs2").lightTabs();

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<div class="two-main-tabs">
           <div class="head_img_text2">сопутсТвующие товары</div>
            <ul class="tab-ul">
                <li class="btn-women">посуда</li>
                <li class="btn-women">мед</li>
                <li class="btn-women">чайники</li>
                <li class="btn-women">сладости</li>     
            </ul>
            <div>
      <!-- ------------- -->
            <div class="tabs-li"> 
              <div class="m-prod-wrap prod-women clearfix">      
                <img src="img/posuda1.jpg" alt="" />
            
              </div>
            </div>
            
            <!-- ------------- --> 
            <div class="tabs-li">     
              <div class="m-prod-wrap prod-corp clearfix">      
              <img src="img/med.jpg" alt="" />
                    
                
              </div>
            </div>
    
      
       <!-- ------------- --> 
            <div class="tabs-li">     
              <div class="m-prod-wrap prod-corp clearfix">      
                
                <img src="img/posuda2.jpg" alt="" />
 
                               
                
              </div>
            </div>
         <!-- ------------- -->       
           <div class="tabs-li">     
              <div class="m-prod-wrap prod-corp clearfix">      
<img src="img/posuda3.jpg" alt="" />
 
            </div>
            </div>
 
 
 
 
 
 
 
 
 
<div class="two-main-tabs2">
           <div class="head_img_text2">сопутсТвующие товары</div>
            <ul class="tab-ul">
                <li class="btn-women">посуда</li>
                <li class="btn-women">мед</li>
                <li class="btn-women">чайники</li>
                <li class="btn-women">сладости</li>     
            </ul>
            <div>
      <!-- ------------- -->
            <div class="tabs-li"> 
              <div class="m-prod-wrap prod-women clearfix">      
                <img src="img/posuda1.jpg" alt="" />
            
              </div>
            </div>
            
            <!-- ------------- --> 
            <div class="tabs-li">     
              <div class="m-prod-wrap prod-corp clearfix">      
              <img src="img/med.jpg" alt="" />
                    
                
              </div>
            </div>
    
      
       <!-- ------------- --> 
            <div class="tabs-li">     
              <div class="m-prod-wrap prod-corp clearfix">      
                
                <img src="img/posuda2.jpg" alt="" />
 
                               
                
              </div>
            </div>
         <!-- ------------- -->       
           <div class="tabs-li">     
              <div class="m-prod-wrap prod-corp clearfix">      
<img src="img/posuda3.jpg" alt="" />
 
            </div>
            </div>

Работает один та почему то

@Уф · 23.08.2017, 09:54

у тебя разметка кривая. дивы не там закрыл основные

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<div class="two-main-tabs">
            <div class="head_img_text2">сопутсТвующие товары</div>
                <ul class="tab-ul">
                    <li class="btn-women">посуда</li>
                    <li class="btn-women">мед</li>
                    <li class="btn-women">чайники</li>
                    <li class="btn-women">сладости</li>     
                </ul>
        <!-- ------------- -->
            <div class="tabs-li"> 
                <div class="m-prod-wrap prod-women clearfix">      
                    <img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=1&w=200&h=100" alt="" />
                </div>
            </div>
        <!-- ------------- --> 
            <div class="tabs-li">     
                <div class="m-prod-wrap prod-corp clearfix">      
                    <img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=2&w=200&h=100" alt="" />
                </div>
            </div>
        <!-- ------------- --> 
            <div class="tabs-li">     
                <div class="m-prod-wrap prod-corp clearfix">      
                    <img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=3&w=200&h=100" alt="" />
                </div>
            </div>
        <!-- ------------- -->       
            <div class="tabs-li">     
                <div class="m-prod-wrap prod-corp clearfix">      
                    <img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=4&w=200&h=100" alt="" />
                </div>
            </div>
</div>
 
<div class="two-main-tabs2">
            <div class="head_img_text2">сопутсТвующие товары</div>
                <ul class="tab-ul">
                    <li class="btn-women">посуда</li>
                    <li class="btn-women">мед</li>
                    <li class="btn-women">чайники</li>
                    <li class="btn-women">сладости</li>     
                </ul>
        <!-- ------------- -->
            <div class="tabs-li"> 
                <div class="m-prod-wrap prod-women clearfix">      
                    <img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=10&w=200&h=100" alt="" />
                </div>
            </div>
        <!-- ------------- --> 
            <div class="tabs-li">     
                <div class="m-prod-wrap prod-corp clearfix">      
                    <img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=11&w=200&h=100" alt="" />
                </div>
            </div>
        <!-- ------------- --> 
            <div class="tabs-li">     
                <div class="m-prod-wrap prod-corp clearfix">      
                    <img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=12&w=200&h=100" alt="" />
                </div>
            </div>
            <!-- ------------- -->       
            <div class="tabs-li">     
                <div class="m-prod-wrap prod-corp clearfix">      
                    <img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=13&w=200&h=100" alt="" />
                </div>
            </div>
</div>

и в самой функции почему то после вызова второй раз переменная tabs начинает всегда указывать на второй блок, не знаю как правильно сделать, поэтому привинтил костыль - передача родителя в функцию показа блока, может кто исправить по нормальному

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 (function (jQuery) {
 jQuery.fn.lightTabs = function (options) {
  var createTabs = function () {
   var tabs = this;
   var i = 0;
   showPage = function (i,tabs) {         
     $(tabs).children("div").children("div").hide();
     $(tabs).children("div").children("div").eq(i).fadeIn("900");
     $(tabs).children("ul").children("li").removeClass("active-tab");
     $(tabs).children("ul").children("li").eq(i).addClass("active-tab");
   }
   showPage(0,tabs);
    
  jQuery(tabs).children("ul").children("li").each(function (index, element) {
     $(element).attr("data-page", i);
     i++;
  });
  jQuery(tabs).children("ul").children("li").click(function () {
        var tabs1 = $(this).parent().parent();
        showPage(parseInt($(this).attr("data-page")),tabs1);
   });
 };
 return this.each(createTabs);
};
})(jQuery);
  
 jQuery(".two-main-tabs").lightTabs(); 
 jQuery(".two-main-tabs2").lightTabs();

https://jsfiddle.net/xq3uevj0/

@Prorok256 · 24.08.2017, 13:10 **[ТС]**

Спасибо.

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Prorok256 1 / 1 / 1 Регистрация: 23.11.2015 Сообщений: 90
	24.08.2017, 13:10 [ТС]
	Спасибо. 0