Блог

Я использую пользовательский интерфейс jQuery Tabs со стандартной структурой вкладок (http://jqueryui.com/demos/tabs / ). Я не включил сюда весь html, поскольку это излишне, если вы знакомы с пользовательским интерфейсом Tabs.

Но в этом случае, что мне нужно сделать, это показать другое изображение для каждой активной вкладки. Т.Е. другое изображение в #headerwrapper, когда активен #tabone, и другое, когда активен #tabtwo и т.д. И в идеале добавлять / выключать эти изображения с чем-то вроде эффекта прозрачности fx.

Инициализация моих вкладок выглядит следующим образом:

 var $tabs= $("#tabs").tabs({
    }); 
  

Похоже, мне нужно сделать это (согласно ответу Мэтта, приведенному ниже), чтобы найти активную вкладку:

 $('#tabs').tabs({
select: function(event, ui) { .... });
  

Но мне не повезло с ответом Мэтта.

Это headerwrapper и image CSS:

 #headerwrapper {
background: url(images/image.jpg) top center no-repeat;
height:88px;
}
  

Возможно ли показывать разные изображения для каждой вкладки и изменять их (т. Е. fx: {opacity: ‘toggle’}) по мере их изменения?

Вы могли бы использовать data-* атрибуты:

 $("#tabs").tabs({
    select: function($event, ui) {
        /* Extract the image from the active tab: */
        var img = $(ui.panel).data("image");

        /* Animate the header out, set the background css, then animate back in: */
        $("#headerwrapper")
            .animate({ opacity: 'toggle' }, function() {
                $(this).css("background-image", "url("   img   ")")
                    .animate({ opacity: 'toggle' });
            });
    }
});
  

И на каждой панели вкладок было бы data-image определено:

 <div id="tabs-1" data-image="http://placekitten.com/g/300/88">...</div>
  

Вот рабочий пример: http://jsfiddle.net/8muBm/2 /

Вы можете установить само изображение. Итак, в зависимости от того, на какой вкладке вы находитесь, вы можете переименовать изображения в header0, header1 и т.д… Вы можете использовать

 $('#example').tabs({
    select: function(event, ui) {
        var selected = $('#example').tabs('option', 'selected');
        $("#headerimg").attr("src", "/new/image/header"   selected   ".jpg");
    }
});
  

Что-то подобное должно сработать. Вы можете получить текущую выбранную вкладку. В противном случае вы также всегда можете использовать оператор if / else.