Добрый день, требуется помощь знающих людей, голову сломал(((
На сайте разместил вкладки (код 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;
}
|
|