Changin page background acordin to tab

  • Resolved bogdan90i

    (@bogdan90i)


    9 years, 6 months ago

    Hello,

    First thank you for the plugin it’s great.
    Second i have plugin version 0.3.4, wordpress 4.2.2, the rest of the options are default.

    What i am trying to achieve is that when i click on a different tab i automatically add a class to the div #page of wordpress. I already tried some scripts and none worked.

    Here is what i tried:

    if ( $('#squelch-taas-tab-group-0 ul li').hasClass('ui-tabs-active') ) {
            $('#page').addClass('firstli');
        }

    And it does not add the class.
    This is the only way i can see it done. But since the class is not added it’s not that great.
    If you have another way of changing the background acording to the tab you are on i’m opened.
    I do not want to change the tab background. I want to change the background of the website this is why i wanted to add class.

    https://www.ads-software.com/plugins/squelch-tabs-and-accordions-shortcodes/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Matt Lowe

    (@squelch)

    Hi bogdan90i,

    jQuery would indeed be the only way to achieve what you are trying to do. I don’t have time to test a solution but what you have looks like it’s most of the way there. I’d recommend something like:

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

    It’s untested, but that should add the relevant tab ID to whichever element has an ID of “page”, and then you can style it accordingly with CSS.

    Thread Starter bogdan90i

    (@bogdan90i)

    Thank you very much it worked, but i wanted to ask you if there is any way to also remove the class after, because now it add all of them and if i have on that div multiple classes it will take the last image.

    So now i have <div id=”page” class=”href sitemap id-1 id-2 id-3″> after i click all the tabs. What i want is for it to remove the last class (id) added.

    Plugin Author Matt Lowe

    (@squelch)

    Again, untested, but I’d probably do something like:

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

    (@squelch)

    Er, wait… “less haste, more speed” as they say. That should have been:

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

    (@bogdan90i)

    It works. But another help needed :). How can i remove only the added class, because i have 2 classes( hfeed site ) that need to still be there and it removes them if i click other tabs. it removed the hole class attributes not just “id-1” or “id-2”.

    Plugin Author Matt Lowe

    (@squelch)

    At a guess, you need another if:

    $('#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);
});
    Thread Starter bogdan90i

    (@bogdan90i)

    Thank you very much. Exactly what i needed.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Changin page background acordin to tab’ is closed to new replies.