Проблема с табами

@a4t_ech · Регистрация: 10.08.2015

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

Первая вкладка у меня стоит с классом "active", при нажатии на вторую или третью у первой должен удалиться класс "active" и присвоиться той на которую нажал. Но получается так - при нажатии на 2 или 3 с 1 удаляется класс "active" и в коде html видно как нажатой ссылке присваивается класс "active" , но на экране визуально он не присваивается и при нажатии на другую ссылку уже не уходит. В результате у всех 3 ссылок появляется класс "active", но на екране его нет.
Помогите! От этой жары моцк уже кипит(((

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
<div class="sort-bar">
                    <ul class="sort-menu">
                        <li><a href="#!" class="active">By Destination</a></li>
                        <li><a href="#!">By Species</a></li>
                        <li><a href="#!">By Tour Type</a></li>
                    </ul>
                    <!-- ul -->
                </div>
                <!-- sort-bar -->
                
                <div class="sort-result">
                    <div class="africa">
                        <img src="img/africa.jpg" alt="africa">
                        <h4>Africa Holidays</h4>
                        <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance and variety of wild animals make it one of the world’s top wildlife holiday destinations.</p>
                    </div>
                    <!-- africa -->
 
                    <div class="america">
                        <img src="img/america.jpg" alt="america">
                        <h4>Americas Holidays</h4>
                        <p>North, South and Central America are home to an incredible diversity of habitats and species, providing opportunities for wildlife holidays to suit all tastes.</p>
                    </div>
                    <!-- america -->
 
                    <div class="antarctica">
                        <img src="img/antarctica.jpg" alt="antarctica">
                        <h4>Antarctica Holidays</h4>
                        <p>The ‘Great White Continent’ is perhaps the last true wilderness left on earth and ultimate wildlife holiday destination. </p>
                    </div>
                    <!-- antarctica -->
 
                    <div class="asia">
                        <img src="img/asia.jpg" alt="asia">
                        <h4>Asia Holidays</h4>
                        <p>Choose a Naturetour wildlife holiday to Asia and benefit from our experience of over 20 years, and amazing network of local contacts, on this incredibly diverse continent.</p>
                    </div>
                    <!-- asia -->
 
                    <div class="australia">
                        <img src="img/australia.jpg" alt="australia">
                        <h4>Australasia Holidays</h4>
                        <p>Australia and New Zealand offer extraordinary wildlife in safe, peaceful surroundings. Our tours focus on this continent's unique flora and fauna.</p>
                    </div>
                    <!-- australia -->
 
                    <div class="europa">
                        <img src="img/europa.jpg" alt="europa">
                        <h4>Antarctica Holidays</h4>
                        <p>The ‘Great White Continent’ is perhaps the last true wilderness left on earth and ultimate wildlife holiday destination. </p>
                    </div>
                    <!-- europa -->
 
                </div>

CSS
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
.sort-bar {
        margin: 31px 0 0 16px;
        .gradient(linear-gradient(#fff, #f4f3f1), 0, none, none, inset 0 -2px #ffffff);
        ul {
            list-style: none;
            border-radius: 5px;
            li {
                display: inline-block;
                position: relative;
                margin-left: -5px;
                .active {
                    .border(18px, 36px, "ZurichBT Roman", #fff, none, block, 0 66px 0 66px, relative, 1px solid #cfcdc5, 5px 0 0 5px);
                    .gradient(linear-gradient(#66c13e, #0f941a), 5px 0 0 5px, 1px solid #0c932f, 1px solid #0c932f, inset 1px 1px #81de41);
                    border-right: 1px solid #0f941a;
                    border-bottom: 1px solid #0f941a;
                    text-shadow: 0 -2px #005c13;
                } //active 
                a {
                    .border(18px, 36px, "ZurichBT Roman", #444137, none, block, 0 66px 0 66px, relative, 1px solid #cfcdc5, 0 0 0 0);
                } //a
            } //li
            &:last-child {
                border-right: none;
            } //last-child
            &:before {
                content: url(../img/arrow.png);
                position: absolute;
                top: 8px;
                left: 52px;
            } //before
        } //ul
    } //sort-bar
    .africa {
        margin: 20px 0 0 16px;
        width: 220px;
        height: 247px;
        float: left;
        img {
            .img-result;
        }
        h4 {
            .sort-text(14px, 20px, "Arial", #3a3731, bold);
            padding: 1px;
        } //h4
        p {
            .sort-text(12px, 18px, "Arial", #7d7c79, normal);
            padding: 4px 0 40px 0;
        } //p
    } //africa
    .america {
        margin: 20px 0 0 31px;
        width: 220px;
        height: 247px;
        float: left;
        img {
            .img-result;
        }
        h4 {
            .sort-text(14px, 20px, "Arial", #3a3731, bold);
            padding: 1px;
        } //h4
        p {
            .sort-text(12px, 18px, "Arial", #7d7c79, normal);
            padding: 4px 0 40px 0;
        } //p
    } //america
    .antarctica {
        margin: 20px 0 0 16px;
        width: 220px;
        height: 247px;
        float: right;
        img {
            .img-result;
        }
        h4 {
            .sort-text(14px, 20px, "Arial", #3a3731, bold);
            padding: 1px;
        } //h4
        p {
            .sort-text(12px, 18px, "Arial", #7d7c79, normal);
            padding: 4px 0 40px 0;
        } //p
    } //antarctica
    .asia {
        margin: 0 0 0 16px;
        width: 220px;
        height: 247px;
        img {
            .img-result;
        }
        h4 {
            .sort-text(14px, 20px, "Arial", #3a3731, bold);
            padding: 1px;
        } //h4
        p {
            .sort-text(12px, 18px, "Arial", #7d7c79, normal);
            padding: 4px 0 0 0;
        } //p
    } //asia
    .australia {
        margin: 0 0 0 31px;
        width: 220px;
        height: 247px;
        float: left;
        img {
            .img-result;
        }
        h4 {
            .sort-text(14px, 20px, "Arial", #3a3731, bold);
            padding: 1px;
        } //h4
        p {
            .sort-text(12px, 18px, "Arial", #7d7c79, normal);
            padding: 4px 0 0 0;
        } //p
    } //australia
    .europa {
        margin: 0 0 0 16px;
        width: 220px;
        height: 247px;
        float: right;
        img {
            .img-result;
        }
        h4 {
            .sort-text(14px, 20px, "Arial", #3a3731, bold);
            padding: 1px;
        } //h4
        p {
            .sort-text(12px, 18px, "Arial", #7d7c79, normal);
            padding: 4px 0 0 0;
        } //p
    } //europa

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function() {
 
    $('.sort-result>div:not(.africa, .asia)').hide();
 
    $('.sort-bar ul li').each(function (i) {
        $(this).attr('data-tab', 'tab' + i);
    });
 
    $('.sort-result>div').each(function(i) {
        $(this).attr('data-tab', 'tab' + i);
    });
 
    $('.sort-bar ul li').on('click', function () {
 
        var dataTab = $(this).data('tab');
        var getWrapper = $(this).closest('.sort-bar');
 
        getWrapper.find('.sort-menu li a').removeClass('active');
        $(this).addClass('active');
        
 
    });
});

@sad67man · 16.07.2016, 23:38

a4t_ech, Вы удаляете класс active у тега a, а вешаете на тег li

@a4t_ech · 16.07.2016, 23:50 **[ТС]**

т.е. все стили с а перенести на li?

@sad67man · 17.07.2016, 00:23

a4t_ech,

JavaScript
1
2
getWrapper.find('.sort-menu li a').removeClass('active');
$(this).find("a").addClass('active');

@a4t_ech · 17.07.2016, 10:43 **[ТС]**

sad67man, спасибо!

Добавлено через 55 минут
каждая вкладка должна открывать по 2 дива, но при присвоении data-tab ссылки получают номера от 0 до 2, а дивы от 0 до 5. значит надо чтоб таб с № 0 открывал дивы с №0 и №3, таб с №1 дивы с №1 и №4 и таб с №2 дивы с №3 №5.
такая конструкция разве не верна?
getWrapper.find('.sort-result>div[data-tab='+dataTab+']').show(); - первый див с №таба, т е 0
getWrapper.find('.sort-result>div[data-tab='+dataTab+' + 3]').show(); - второй див с №таба 3

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
$(document).ready(function() {
 
    $('.sort-result>div:not(:nth-child(1), :nth-child(4))').hide();
 
    $('.sort-bar ul li').each(function (i) {
        $(this).attr('data-tab', 'tab' + i);
    });
 
    $('.sort-result>div').each(function(i) {
        $(this).attr('data-tab', 'tab' + i);
    });
 
    $('.sort-bar ul li').on('click', function () {
 
        var dataTab = $(this).data('tab');
        var getWrapper = $(this).closest('.body-left');
        
 
        getWrapper.find('.sort-menu li a').removeClass('active');
        $(this).find("a").addClass('active');
        
        getWrapper.find('.sort-result>div').hide();
        getWrapper.find('.sort-result>div[data-tab='+dataTab+']').show();
        getWrapper.find('.sort-result>div[data-tab='+dataTab+' + 3]').show();
        
 
    });
    
});

@sad67man · 17.07.2016, 12:17

a4t_ech,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
  $('.sort-result>div:not(:nth-child(1), :nth-child(4))').hide();
  $('.sort-bar ul li a').click(function(e) {
    e.preventDefault();
    var index = $(this).parent().index();
    var wrapper = $(this).closest('.body-left');
    var divs = wrapper.find('.sort-result>div');
    wrapper.find('.sort-menu li a.active').removeClass('active');
    $(this).addClass('active');
    divs.hide();
    divs.eq(index).show();
    divs.eq(index + 3).show();
  })
});

@a4t_ech · 17.07.2016, 12:40 **[ТС]**

sad67man, спасибо! Все работает как надо

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,834
	16.07.2016, 23:38
	a4t_ech, Вы удаляете класс active у тега a, а вешаете на тег li 0

@a4t_ech 4 / 4 / 2 Регистрация: 10.08.2015 Сообщений: 162
	16.07.2016, 23:50 [ТС]
	т.е. все стили с а перенести на li? 0

@a4t_ech 4 / 4 / 2 Регистрация: 10.08.2015 Сообщений: 162
	17.07.2016, 12:40 [ТС]
	sad67man, спасибо! Все работает как надо 0

Проблема с табами

Решение