VPF::Смена класса при закрытии и открытии вкладки

sam020692

Дата 9.4.2017, 18:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 9.4.2017

Репутация: нет
Всего: нет

Добрый день, требуется помощь знающих людей, голову сломал(((
На сайте разместил вкладки (код js и PHP ниже).
Проблема следующая: нужно чтобы при нажатии на вкладку, ей присваивался какой либо новый class (например 'active'), а при повторном нажатии 'active' становился например 'open'. В итоге активной вкладке присваивается класс 'active', всем остальным 'open', а при повторном нажатии(сворачивание вкладки) класс 'active' как и у остальных вкладок становился бы 'open'.
В js за это отвечает строчка 16. Пробовал играться с классами, максимум чего смог добиться, что всё заработало как должно, но только при условии, что просто щелкаешь по вкладкам друг за другом, но как только одну из них свернешь, и нажмешь на открытие следующей, классы active и open менялиcь местами, и в результате открытие вкладки становилось 'open', а закрытие соответственно 'active', то есть задом на перед)
После этого был такой вариант:

Код


$tabs.addClass('open');
$tab.toggleClass('active');

При нем, классы меняются как положено, но при открытой вкладке у остальных класс не сбрасывается на 'open'.
Буду признателен за любую помощь. 2 дня голову ломаю(((

Код


// Tabs
    $('body:not(.su-other-shortcodes-loaded)').on('click', '.su-tabs-nav span', function (e) {
        var $tab = $(this),
            data = $tab.data(),
            index = $tab.index(),
            is_disabled = $tab.hasClass('su-tabs-disabled'),
            $tabs = $tab.parent('.su-tabs-nav').children('span'),
            $panes = $tab.parents('.su-tabs').find('.su-tabs-pane'),
            $gmaps = $panes.eq(index).find('.su-gmap:not(.su-gmap-reloaded)');
        // Check tab is not disabled
        if (is_disabled) return false;
        // Hide all panes, show selected pane
        $panes.hide('none').eq(index).toggle();
        
// Disable all tabs, enable selected tab
$tabs.removeClass('su-tabs-current').eq(index).addClass('su-tabs-current');
        
// Reload gmaps
        if ($gmaps.length > 0) $gmaps.each(function () {
            var $iframe = $(this).find('iframe:first');
            $(this).addClass('su-gmap-reloaded');
            $iframe.attr('src', $iframe.attr('src'));
        });
        // Set height for vertical tabs
        tabs_height();
        // Open specified url
        if (data.url !== '') {
            if (data.target === 'self') window.location = data.url;
            else if (data.target === 'blank') window.open(data.url);
        }
        e.preventDefault();
    });
 
    // Activate tabs
    $('.su-tabs').each(function () {
        var active = parseInt($(this).data('active')) - 1;
        $(this).children('.su-tabs-nav').children('span').eq(active).trigger('click');
        tabs_height();
    });

Код


 public static function tabs( $atts = null, $content = null ) {
        $atts = shortcode_atts( array(
                'active'   => 1,
                'vertical' => 'no',
                'style'    => 'default', // 3.x
                'class'    => ''
            ), $atts, 'tabs' );
        if ( $atts['style'] === '3' ) $atts['vertical'] = 'yes';
        do_shortcode( $content );
        $return = '';
        $tabs = $panes = array();
        if ( is_array( self::$tabs ) ) {
            if ( self::$tab_count < $atts['active'] ) $atts['active'] = self::$tab_count;
            foreach ( self::$tabs as $tab ) {
                $tabs[] = '<span class="' . su_ecssc( $tab ) . $tab['disabled'] . '"' . $tab['anchor'] . $tab['url'] . $tab['target'] . '>' . su_scattr( $tab['title'] ) . '</span>';
                $panes[] = '<div class="su-tabs-pane su-clearfix' . su_ecssc( $tab ) . '">' . $tab['content'] . '</div>';
            }
            $atts['vertical'] = ( $atts['vertical'] === 'yes' ) ? ' su-tabs-vertical' : '';
            $return = '<div class="su-tabs su-tabs-style-' . $atts['style'] . $atts['vertical'] . su_ecssc( $atts ) . '" data-active="' . (string) $atts['active'] . '"><div class="su-tabs-nav">' . implode( '', $tabs ) . '</div><div class="su-tabs-panes">' . implode( "\n", $panes ) . '</div></div>';
        }
        // Reset tabs
        self::$tabs = array();
        self::$tab_count = 0;
        su_query_asset( 'css', 'su-box-shortcodes' );
        su_query_asset( 'js', 'jquery' );
        su_query_asset( 'js', 'su-other-shortcodes' );
        do_action( 'su/shortcode/tabs', $atts );
        return $return;
    }

akizelokro

Дата 11.4.2017, 20:11 (ссылка)

(нет голосов)

Загрузка ...

Крокодил

Профиль
Группа: Участник
Сообщений: 761
Регистрация: 30.7.2007

Репутация: нет
Всего: 5

У элемента может быть несколько классов, в том числе просто вспомогательные, без описания.
Кроме addClass есть removeClass, правда, надо проверять, если ли удаляемый класс у элемента перед удалением.

--------------------

a = a + b; b = a - b; a = a - b;

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »