JQuery вкладки. , , как я могу изменить CSS вкладки?

Question

В настоящее время я использую:

<div id="tabs" class="basictab">
                    <ul>
                        <li><a href="#fragment-1" id="Beta"><span>B.E.T.A. Plans</span></a></li>
                        <li><a href="#fragment-2" id="Mini"><span>Mini-Sites</span></a></li>
                        <li><a href="#fragment-3" id="Independent"><span>Independent Sites</span></a></li>
                        <li><a href="#fragment-4" id="Tools"><span>Tools</span></a></li>
                    </ul>
                    <div id="fragment-1" class="tabcontainer">
                        <nav:beta runat="server" ID="beta1" Visible="true" />
                    </div>
                    <div id="fragment-2" class="tabcontainer">
                        <nav:mini runat="server" ID="mini1" Visible="true" />
                    </div>
                    <div id="fragment-3" class="tabcontainer">

                    </div>
                    <div id="fragment-4" class="tabcontainer">
                        <nav:tools runat="server" ID="tools2" Visible="true" />
                    </div>
                </div>

<script type="text/javascript" >
$(document).ready(function(){
    var $tabs = $("#tabs").tabs({event: 'mouseover'});
    $tabs.tabs("select", 3);
  });
    </script>

для выбора конкретной вкладки. Когда я делаю это, как я могу изменить CSS выбранной вкладки? Разве я не хотел бы зацепить

$tabs.tabs("select",3);

Я пробовал:

$tabs.tabs("select",3).removeClass('basictab').addClass('basictabactive');

но это меняет CSS для ВСЕХ классов.

Большое спасибо заранее от jQuery n00b.

Answer 1

Добавьте обработчик выбора или загрузки (в зависимости от того, когда вы хотите его запустить), который добавляет CSS или класс к компоненту, который вы хотите изменить.

 var $tabs = $('#tabs').tabs({
                 event: 'mouseover',
                 select: function(event,ui) {
                             $(ui.panel).css({ backgroundColor: '#ffffff'});
                         });
             });

Возможно, проще использовать существующие классы для вкладок и настроить CSS для контейнера вкладок.

#tabs .ui-state-highlight {
    background-color: #ffffff;
}

#tabs .ui-state-active {
    background-color: #ff0000;
    color: #ffffff;
}

#tabs .ui-state-default {
    background-color: #ffff00;
    color: #000000;
}

Answer 2

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

Это изменит класс вашего предмета.

Answer 3

Если вы используете Firefox с расширением Firebug, вы можете проверить элемент страницы в реальном времени, чтобы увидеть, какой класс он имеет в настоящее время.

В вашем коде элемент с классом basictab является родительским элементом вкладок div. Ваш код изменит его класс. Если вы хотите изменить только текущий активный класс, проверьте его с помощью Firebug. Текущая реализация jQuery-UI изменит выбранный класс li на класс ui-tabs-selected.

Если вы хотите изменить класс элемента, это применить CSS, возможно, вам будет проще создать класс CSS для ui-tabs-selected, а не менять его, так как это заставит вас писать дополнительный js-код только для чего-то быть сделано только с помощью CSS.

Answer 4

Вы можете найти информацию об этом здесь:

http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/