Jquery UI Tabs add class

Question

Below is my HTML set up for the tabs which all works fine, i want to extend it a bit by changing the class of the outer containing div (id=tab-wrap class=bike) to whatever tab is showing. The idea is to change the background image based on the tab.

    <div id="tab-wrap" class="bike">

        <div id="batter-finder">
            <h1>Battery Finder</h1>
            <p>Choose Your Application then find your battery</p>

            <div id="tabs">
               <ul>
                  <li><a href="#bike">Bike</a></li>
                  <li><a href="#atv">ATV</a></li>
                  <li><a href="#utv">UTV</a></li>
                  <li><a href="#snow">Snow</a></li>
                  <li><a href="#water">Water</a></li>
               </ul>

               <div id="bike">
                  <p>Bike content</p>
               </div>

               <div id="atv">
                  <p>ATV content</p>
               </div>

               <div id="utv">
                  <p>UTV content</p>
               </div>

               <div id="snow">
                  <p>Snow content</p>
               </div>

               <div id="water">
                  <p>Water content</p>
               </div>

            </div> <!-- /tabs -->

        </div>

    </div>

So if i select the tab "water" i'd like to change the class from:

<div id="tab-wrap" class="bike">

to

<div id="tab-wrap" class="water">

An elegant fade in/out change would be good. My jquery is as follows

$(document).ready(function() {

    $("#tabs").tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});

Appreciate the help Thanks

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

you can do it like this,

demo

$("#tabs").tabs({ 
    fx: { height: 'toggle', opacity: 'toggle' },
    select: function(event, ui) {
         $("#tab-wrap").attr('class', ui.panel.id);
    }
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 17, 2010 at 11:24

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris · Accepted Answer · 2010-07-17 11:19:05Z

0

$("#tabs").bind("tabsselect", function(event, ui) {
    $("#tab-wrap").attr('class', $(ui.panel).attr('id'));
}

or if you want to bind the event when you declare the tabs:

$("#tabs").tabs({
    select: function(event, ui) {
        $("#tab-wrap").attr('class', $(ui.panel).attr('id'));
    }
});

Check out the events section of the jQuery UI tabs demo page.

answered Jul 17, 2010 at 11:19

Chris

10.5k3 gold badges31 silver badges31 bronze badges

Collectives™ on Stack Overflow

Jquery UI Tabs add class

2 Answers 2

demo

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related