WordPress tabs jQuery hasClass

1 Views

I want to add to the body a class when a li has active class.

Here is my html:

Read More
<ul class="tabs-shortcode-list ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="Trapedefum-0" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
        <a href="#Trapedefum-0" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Trape de fum</a>
    </li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="Luminatoare-1" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
        <a href="#Luminatoare-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Luminatoare</a>
    </li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="Fatade-2" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">
      <a href="#Fatade-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Fatade</a>
    </li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="Copertine-3" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false">
      <a href="#Copertine-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4">Copertine</a>
    </li>
</ul>

And here is the jQuery that I used to add the class: 

if ( $('.ui-tabs-nav li:first-child').hasClass('ui-tabs-active') ) {
            $('body').addClass('firstli');
        }

I thought that I’m not doing it the right way, but i tried with the #primary div and it worked, it inserted the class into the body. So I think the problem is not with the jQuery.

So long story short, I want when the li has the class ui-tabs-active to add to the body the class firstli.

Also I’m doing this to a wordpress website.

And the piece of html is from the Tabs Shortcode for wordpress.

Thank you in advance.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. First make sure that isn’t the problem the dollar sign($).

    The jQuery library included with WordPress is set to the noConflict() mode (see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

    In the noConflict() mode, the global $ shortcut for jQuery is not available, so you can still use:

    jQuery(document).ready(function(){
    jQuery(#somefunction) ...
});

    More : https://codex.wordpress.org/Function_Reference/wp_enqueue_script

  2. Here is the resolution for the problem that i posted

     $('#squelch-taas-tab-group-0 ul li').click(function() {
    var id = $(this).find('a').eq(0).attr('id');
    $('#page').addClass(id);
    if ($('#squelch-taas-tab-group-0').data('lastid')) {
        $('#page').removeClass($('#squelch-taas-tab-group-0').data('lastid'));
    }
    $('#squelch-taas-tab-group-0').data('lastid', id);
});