jQuery选项卡。如何更改选项卡的css?

jQuery选项卡。如何更改选项卡的css?,jquery,tabs,Jquery,Tabs,目前我使用: <div id="tabs" class="basictab"> <ul> <li><a href="#fragment-1" id="Beta"><span>B.E.T.A. Plans</span></a></li> <li><a

目前我使用:

<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>
我试过:

$tabs.tabs("select",3).removeClass('basictab').addClass('basictabactive');
但是这会改变所有类的css


请提前向jQuery n00b致谢。

您可以在此处找到相关信息:


添加一个选择或加载处理程序(取决于何时启动),将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;
}

这将更改项目上的类。

如果您使用Firefox和Firebug扩展,您可以检查live page元素,查看它当前拥有的类

在代码中,类为
basictab
的元素是选项卡父级
div
。您的代码将更改它的类。如果只想更改当前活动类,请使用Firebug检查它。当前jQuery UI实现将更改所选的
li
类,以选择类
UI选项卡


如果您想更改元素的类是为了应用css,那么可能更简单的方法是为选定的
ui选项卡
class创建css,而不是更改它,因为这将使您只为可以单独使用css完成的事情编写额外的js代码。

这样行吗?我期待着改变特定的CSS。Seleccted tab.@tvanfosson-谢谢您的帮助,但它似乎不起作用:(您是想更改“tab”--带有链接的位--还是“tab”内容部分。我相信ui.panel是对内容的引用。如果您想更改前者,请使用
ui.tab
。如果选择器似乎没有抓住您所需的确切元素,请在Firebug中使用它。您还可以使用各种
ui
属性作为其他选择器的上下文如果它只是一个子组件,您需要更改。@tvanfosson-谢谢,但要么它不正确,要么我实现不正确,请查看我的编辑…现在我知道您在做什么,为什么不为
ui-state-default
ui-state-highlight
ui-state-active添加/替换相应的样式呢
对于选项卡容器?我确实阅读了网站…但是它触发了选项卡的单击事件,我有一个子菜单,它基于选项卡,当我。('select',1),若要选择该选项卡,我想更改该选项卡的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;
}
$("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