@arttstyle
web-макака

Как сюда добавить анимацию?

function oxygenVSBInitTabs(element) {
        if (element!==undefined) {
          jQuery(element).find('.oxy-tabs-wrapper').addBack('.oxy-tabs-wrapper').each(function(index) {
            jQuery(this).children('.oxy-tabs-wrapper > div').eq(0).trigger('click');
          });
        }
        else {
          jQuery('.oxy-tabs-wrapper').each(function(index) {
            jQuery(this).children('.oxy-tabs-wrapper > div').eq(0).trigger('click');
          });
        }
      }

      jQuery(document).ready(function() {
                let event = new Event('oxygenVSBInitTabsJs');
                document.dispatchEvent(event);
      });

            document.addEventListener("oxygenVSBInitTabsJs",function(){
                oxygenVSBInitTabs();
            },false);
  
      // handle clicks on tabs  
      jQuery("body").on('click', '.oxy-tabs-wrapper > div', function(e) {

          /* a tab or an element that is a child of a tab has been clicked. prevent any default behavior */
          //e.preventDefault();
          
          /* which tab has been clicked? (e.target might be a child of the tab.) */
          clicked_tab = jQuery(e.target).closest('.oxy-tabs-wrapper > div');
          index = clicked_tab.index();  
          
          /* which tabs-wrapper is this tab inside? */
          tabs_wrapper = jQuery(e.target).closest('.oxy-tabs-wrapper');

          /* what class dp we use to signify an active tob? */
          class_for_active_tab = tabs_wrapper.attr('data-oxy-tabs-active-tab-class');
          
          /* make all the other tabs in this tabs-wrapper inactive */
          jQuery(tabs_wrapper).children('.oxy-tabs-wrapper > div').removeClass(class_for_active_tab);

          /* make the clicked tab the active tab */    
          jQuery(tabs_wrapper).children('.oxy-tabs-wrapper > div').eq(index).addClass(class_for_active_tab);

          /* which tabs-contents-wrapper is used by these tabs? */
          tabs_contents_wrapper_id = tabs_wrapper.attr('data-oxy-tabs-contents-wrapper');

          /* try to grab the correct content wrapper, in case of duplicated ID's */
                $content_wrapper = jQuery(tabs_wrapper).next();
                if( $content_wrapper.attr("id") != tabs_contents_wrapper_id ) $content_wrapper = jQuery( '#' + tabs_contents_wrapper_id );

                $content_tabs = $content_wrapper.children( "div" );

                /* hide all of the content */
                $content_tabs.addClass('oxy-tabs-contents-content-hidden');
          
          /* unhide the content corresponding to the active tab*/
                $content_tabs.eq(index).removeClass('oxy-tabs-contents-content-hidden');
        
      });


этот код для переключает табы в таблице. по нажатию на кнопку в oxy-tabs-wrapper
открывается нужный таб в oxy-tabs-contents-wrapper а остальные скрываются

5e13e5b2a67cb681435941.png

я хочу добавить анимацию при переключении как здесь https://codepen.io/P233/pen/LobqH/
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы