< ClearExperience >

Редакция:	18.07.2022
Теги:	JQuery

Вкладки (табы)

HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div class="tabs">

<div class="tabs_trigs">

<button class="tabs_trig active" type="button"></button>

<button class="tabs_trig" type="button"></button>

<button class="tabs_trig" type="button"></button>

</div>

<div class="tabs_targs">

<div class="tabs_targ active"></div>

<div class="tabs_targ"></div>

<div class="tabs_targ"></div>

</div>

</div>

CSS

1

2

3

4

5

6

7

8

9

10

11

.tabs {}

.tabs_trigs {}

.tabs_trig {}

.tabs_trig.active {}

.tabs_targs {}

.tabs_targ {

display: none;

}

.tabs_targ.active {

display: block;

}

JQuery

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

jQuery(document).ready(function($) {

// Табы

(function(){

// let $B = $('body');

let $tabs = $B.find('.tabs'),

$trigs = $tabs.find('.tabs_trig'),

$targs = $tabs.find('.tabs_targ');

if (!$trigs.length || !$targs.length) return;

$trigs.on('click', function() {

let $trig = $(this),

$targ = $targs.eq($trig.index());

if (!$targ.length) return;

$tabs.find('.active').removeClass('active');

$trig.add($targ).addClass('active');

return false;

});

})();

});