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

添加一个select或load处理程序（取决于你想要触发的时间），将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

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

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

Answer 4

如果你使用Firefox和Firebug扩展，你可以检查实时页面元素，看看它当前有什么类。

在您的代码中，类basictab的元素是标签父div。你的代码会改变它的类。如果只想更改当前活动类，请使用Firebug进行检查。当前的jQuery-UI实现将更改所选的li类以使其具有类ui-tabs-selected。

如果您打算更改元素的类是应用css，也许更简单的是为ui-tabs-selected类创建css而不是更改它，因为它会让你只为某些东西编写额外的js代码这可以单独用css完成。

jQuery选项卡。。。如何更改标签的CSS？

4 个答案:

jQuery选项卡。 。 。如何更改标签的CSS？

4 个答案:

jQuery选项卡。。。如何更改标签的CSS？