JQuery UI Tabs добавить класс - PullRequest
Новая
       3

JQuery UI Tabs добавить класс

1 голос
/ 17 июля 2010

Ниже приведен мой HTML-код для вкладок, который все прекрасно работает, я хочу немного его расширить, изменив класс внешнего содержащего div (id = tab-wrap class = bike) на любую вкладку, которую показывает. Идея состоит в том, чтобы изменить фоновое изображение на основе вкладки. 

    <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>

Так что, если я выберу вкладку "вода", я бы хотел изменить класс с: 

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

до 

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

Было бы неплохо элегантное изменение входа / выхода. Мой JQuery выглядит следующим образом 

$(document).ready(function() {

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

Ценю помощь Спасибо

Ответы [ 2 ]

1 голос
/ 17 июля 2010

вы можете сделать это так,

демо 

$("#tabs").tabs({ 
    fx: { height: 'toggle', opacity: 'toggle' },
    select: function(event, ui) {
         $("#tab-wrap").attr('class', ui.panel.id);
    }
});
0 голосов
/ 17 июля 2010 
$("#tabs").bind("tabsselect", function(event, ui) {
    $("#tab-wrap").attr('class', $(ui.panel).attr('id'));
}

или если вы хотите связать событие при объявлении вкладок: 

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

Ознакомьтесь с разделом событий на вкладке jQuery UI демонстрационная страница.

...