动态内容与jQuery ui，独特的tab激活状态

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 - 通过更改基于网址指定的类来更改加载。