带有jQuery ui的动态内容，唯一的选项卡处于活动状态

Question

我想使用jQuery ui创建具有动态内容的jQuery菜单。

我的问题是，我有一些用于选项卡的图像，并且每个图像都不相同，因此每个人的翻转都不相同，当单击该特定选项卡时，如何设计它以显示每个唯一选项卡的活动状态？

提前感谢！

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

请注意，如果图像需要根据所选的url进行更改，则可以调整加载选项卡-您的类仅需要依赖于href-通过更改基于要加载的url分配的类即可。