jQuery选项卡. . .如何更改标签的CSS? [英] jQuery tabs . . . how do I change the css of a tab?

问题描述

当前我使用:

<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?我是否不想束缚

to select a specific tab. When I do this how do I change the css of the selected tab? Wouldn't I want to chain off the

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

我尝试过:

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

但这会更改所有类的css.

but this changes the css for ALL the classes.

非常感谢jQuery n00b.

Many thanks in advance from a jQuery n00b.

推荐答案

添加选择或加载处理程序(取决于您希望其触发的时间)，以将CSS或类添加到要更改的组件中.

Add a select or load handler (depending on when you want it to fire) that adds the CSS or class to the component that you want to change.

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

不过，对于选项卡仅使用现有的类，并为选项卡容器调整CSS可能会更容易.

It might be easier to just use the existing classes for the tabs, though, and adjust the CSS for the tab container.

#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;
}

这篇关于jQuery选项卡. . .如何更改标签的CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！