Плавное появление блока при клике на таб

@v3trov · Регистрация: 24.09.2017

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

Ребят привет! Нужна ваша помощь! т.к. в скриптинге я полный дилетант интересует реализация fade эффекта в коде приведенном ниже. Смысл такой что бы при клике на таб контент плавно появлялся.

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.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).show();
                $(tabs).children("ul").children("li").removeClass("active");
                $(tabs).children("ul").children("li").eq(i).addClass("active");
            }
            
            showPage(0);                
            
            $(tabs).children("ul").children("li").each(function(index, element){
                $(element).attr("data-page", i);
                i++;                        
            });
            
            $(tabs).children("ul").children("li").click(function(){
                showPage(parseInt($(this).attr("data-page")));
            });             
        };      
        return this.each(createTabs);
    };  
})(jQuery);

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
/* Табы в галереи работ
-----------------------------------------------------------------------------*/
.tabs{
    display:inline-block;
    
   
    
}
.tabs > div{
    padding-top:15px;
    min-height:500px;
}
.tabs ul{
    margin:0px;
    padding:0px;
}
.tabs ul:after{
    content:"";
    display:block;
    clear:both;
    margin:0px auto;
    height:5px;
    
}
.tabs ul li{
    margin:0px 10px 0 10px;
    font-size:19px;
   
    cursor:pointer;
    display:inline-block;
    padding:5px 5px;
    background:transparent;
    color:#262626;
}
.tabs ul li.active, .tabs ul li.active:hover{
    background:#262626;
    color:#fff;
    transition:0.4s;
}
.tabs ul li:hover{
    background:transparent; transition:0.7s;
}

Еще если можно подскажите как сделать подгрузку контента этим кодом, допустим из файла?

@v3trov · 26.09.2017, 16:51 **[ТС]**

Поднимаю тему. Ребят ну что правда не кто помочь не может?

@v3trov · 29.09.2017, 07:02 **[ТС]**

Поднимаю вопрос. Помогите!

@j2FunOnly · 29.09.2017, 08:37

v3trov, дайте посмотреть как вы этим пользуетесь, как вызывается ваш плагин? Разметку покажите.

@Уф · 29.09.2017, 10:44

JavaScript
1
2
3
4
5
6
showPage = function(i){
                $(tabs).children("div").children("div").fadeOut();
                $(tabs).children("div").children("div").eq(i).fadeIn();
                $(tabs).children("ul").children("li").removeClass("active");
                $(tabs).children("ul").children("li").eq(i).addClass("active");
            }

Добавлено через 12 минут
поточнее

JavaScript
1
2
3
4
5
6
7
8
9
10
11
            showPage = function(i,init=false){
                if(init) {
                  $(tabs).children("div").children("div").hide();
                  $(tabs).children("div").children("div").eq(i).fadeIn();
                } else {
                  $(tabs).children("div").children("div").fadeOut();
                  setTimeout(function(){$(tabs).children("div").children("div").eq(i).fadeIn();},500);
                }
                $(tabs).children("ul").children("li").removeClass("active");
                $(tabs).children("ul").children("li").eq(i).addClass("active");
            }

https://jsfiddle.net/mfjLkwak/

@v3trov · 30.09.2017, 00:10 **[ТС]**

Помогло! Огромное спасибо!

Добавлено через 28 минут

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="tabs">
    <ul>
        <li>ВКЛАДКА 1</li>
        <li>ВКЛАДКА 2</li>
        <li>ВКЛАДКА 3</li>
    </ul>
    <div>
        <div>[[$GallerySlider_one]]</div>
        <div>[[$GallerySlider_two]]</div>
        <div>[[$GallerySlider_three]]</div>
    </div>            
</div>

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@v3trov 0 / 0 / 0 Регистрация: 24.09.2017 Сообщений: 4
	26.09.2017, 16:51 [ТС]
	Поднимаю тему. Ребят ну что правда не кто помочь не может? 0

@v3trov 0 / 0 / 0 Регистрация: 24.09.2017 Сообщений: 4
	29.09.2017, 07:02 [ТС]
	Поднимаю вопрос. Помогите! 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	29.09.2017, 08:37
	v3trov, дайте посмотреть как вы этим пользуетесь, как вызывается ваш плагин? Разметку покажите. 0

Плавное появление блока при клике на таб

Решение