Интерфейс с вкладками, использующий jQuery, не может заставить «текущую» вкладку принимать настройки непрозрачности - PullRequest
Новая
       35

Интерфейс с вкладками, использующий jQuery, не может заставить «текущую» вкладку принимать настройки непрозрачности

0 голосов
/ 22 ноября 2010

Я адаптировал учебник по интерфейсу с вкладками jQuery, чтобы создать интерфейс для просмотра некоторых изображений.Активная вкладка должна иметь непрозрачность 1, но с помощью кода, который я использую, «текущий» класс назначается для «a» вкладки при нажатии, но непрозрачность не изменяется и остается на 0,3.

Я надеюсь, что смогу добиться этого эффекта без использования настроек непрозрачности css, чтобы он работал с браузерами, которые не поддерживают это.Я очень новичок в Jquery, любая помощь будет высоко ценится. 

        // Initialize.
function init_tabs() {

// Does element exist?
if (!$('ul.tabs').length) {

// If not, exit.
return;
}

// Reveal initial content area(s).
$('div.tab_content_wrap').each(function() {
$(this).find('div.tab_content:first').show();
});

$('ul.tabs a').css({ opacity: .3 });
$('ul.tabs a.current').css({ opacity: 1 });

$('ul.tabs a:not(.current)').hover(
function () {
$(this).fadeTo("fast", 1);
},
function () {
$(this).fadeTo("fast", .3);
}
);

// Listen for click on tabs.
$('ul.tabs a').click(function() {

// If not current tab.
if (!$(this).hasClass('current')) {

// Change the current indicator.
$(this).addClass('current').css({opacity: 1}).parent('li').siblings('li')
.find('a.current').removeClass('current').css({opacity: .3}),


// Show target, hide others.
$($(this).attr('href')).fadeIn(300).siblings('div.tab_content').hide();
}

// Nofollow.
this.blur();
return false;
});
 }

// Kick things off.
$(document).ready(function() {
init_tabs();

});

Ответы [ 2 ]

1 голос
/ 22 ноября 2010

Кажется, проблема в следующем коде: 

$('ul.tabs a:not(.current)').hover(
    function () {
        $(this).fadeTo("fast", 1);
    },
    function () {
        $(this).fadeTo("fast", .3);
    }
);

Вы устанавливаете парение на нетоковых вкладках. Это наведение остается на месте даже после изменения класса вкладки. Таким образом, вы наводите курсор на вкладку, нажимаете на нее, она меняется на класс current, а затем, когда вы наводите курсор мыши, она возвращается к непрозрачности .3, несмотря на новое имя класса; Вам нужно что-то сделать, чтобы справиться с парением для всех вкладок, даже для текущей.

Если вы измените свой код наведения на это, он должен работать: 

$('ul.tabs a').hover(
    function () {
        if(!$(this).hasClass("current")) {
            $(this).fadeTo("fast", 1);
        }
    },
    function () {       
        if(!$(this).hasClass("current")) {
            $(this).fadeTo("fast", .3);
        }
    }
);

Пример: http://jsfiddle.net/TLshW/

0 голосов
/ 22 ноября 2010

Мне кажется, что вы удаляете «текущий» класс сразу после его добавления:

Добавлено здесь: 

$(this).addClass('current').

Удалено здесь: 

.find('a.current').removeClass('current')...

.find найдет предыдущую вкладку, которая уже имеет class = 'current', а также вашу нажатую вкладку, которую вы только что применили class = 'current'

...