使用jQuery UI的动态内容，唯一标签活动状态

Question

我想用jQuery ui创建一个带有动态内容的jQuery菜单。

我的问题是，我有图片的标签，每一个都是不同的，所以每个人的翻身是不同的，我怎么能设计它来显示每个独特的选项卡的活动状态，当该特定的选项卡被点击？

Thanx提前！

Answer 1

我会使用CSS并加载一个样式表，该样式表会根据插件在处于各种状态时给予它们的类替换您的选项卡的样式，以及根据其内容或位置给予它们的唯一类。确保你的样式表是在jQuery UI样式表之后加载的。标签初始化后，通过并分配唯一的类，以便应用CSS。

.ui-tabs .ui-tabs-nav li.ui-tabs-selected.tab-0 
{ 
    background-image: url(/images/selected-tab-0.png); 
} 


$(function() { 
    $('.tabs').tabs(); 
    $('.tabs').find('li').each(function(i) { 
     $(this).addClass('tab-' + i); 
    }); 
}); 

请注意，您可以在负载调节选项卡如果图像需要改变基于所选择的网址 - 您的类将只需要依赖于您的href - 通过改变分配基于类在被加载的网址上。