Вкладки через шорткоды Wordpress

Question

У меня проблемы с добавлением класса на некоторые вкладки jQuery, которые я сейчас использую в Wordpres.Следующий код создал шорткод, который создает вкладки.Мой вопрос заключается в том, как добавить класс к отображаемой вкладке, активной вкладке.Я хочу иметь возможность добавить этот класс к отображаемой вкладке, чтобы я мог оформить его с помощью CSS.Вот код, который я сейчас использую, он работает, но не добавляет классов к активной вкладке:

add_shortcode( 'tabgroup', 'jqtools_tab_group' );
function jqtools_tab_group( $atts, $content ){
$GLOBALS['tab_count'] = 0;

do_shortcode( $content );

if( is_array( $GLOBALS['tabs'] ) ){
foreach( $GLOBALS['tabs'] as $tab ){
$tabs[] = '<li><a class="" href="#">'.$tab['title'].'</a></li>';
$panes[] = '<div class="pane"><h3>'.$tab['title'].'</h3>'.$tab['content'].'</div>';
}
$return = "\n".'<!-- the tabs --><ul class="tabs">'.implode( "\n", $tabs ).'</ul>'."\n".'<!-- tab "panes" --><div class="panes">'.implode( "\n", $panes ).'</div>'."\n";
}
return $return;
}

add_shortcode( 'tab', 'jqtools_tab' );
function jqtools_tab( $atts, $content ){
extract(shortcode_atts(array(
'title' => 'Tab %d'
), $atts));

$x = $GLOBALS['tab_count'];
$GLOBALS['tabs'][$x] = array( 'title' => sprintf( $title, $GLOBALS['tab_count'] ), 'content' =>      $content );

$GLOBALS['tab_count']++;
}

Спасибо.

Answer 1

Было бы намного лучше, если бы вы использовали jquery / javascript для добавления класса.

, если вы уверены, какая вкладка активна при загрузке страницы, вы можете динамически добавить активный класс через jquery.

$(document).ready(function() {
// That is if the first tab is the default active tab.
// Assuming the li tag is what you want to apply the 'active' class on
$('ul.tabs li:first').addClass('active');

// Manipulate Class on click event.
// Assuming the li tag is what you want to apply the 'active' class on


$('ul.li a').click(function() {
// Remove any 'active' class previously added.
$(this).parent().siblings().removeClass('active');

// Add 'active' class to the selected tab.
$(this).parent().addClass('active');

});
});

Надеюсь, это поможет.