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

目前我使用：

 
 
BETA Plans
 
Mini-Sites
 
Independent Sites
 
Tools
 
 
 
 
 
 
 
 
 
 
 
 
 
  $(document).ready(function(){ var $tabs = $("#tabs").tabs({event: 'mouseover'}); $tabs.tabs("select", 3); });  

选择特定选项卡。 当我这样做时，如何更改所选标签的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

如果您使用带Firebug扩展的Firefox，则可以检查实时页面元素，以查看它当前具有的类。

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

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