jQuery меняет фон для каждого li с помощью css - PullRequest
Новая
       30

jQuery меняет фон для каждого li с помощью css

0 голосов
/ 06 июня 2011

У меня есть 1-страничное портфолио с навигационным элементом, содержащим три элемента "li" с тремя различными фоновыми изображениями, и для каждого элемента "li" при наведении курсора используется разное фоновое изображение. 

#nav li.portfolio a:link, #nav li.portfolio a:visited {background:url(../img/icon_folio.png) no-repeat 10px 5px; display:block;}
#nav LI.portfolio a:hover, #nav LI.portfolio a:active, li.portfolio.active {background:url(../img/icon_folio.png) no-repeat 10px -100px;}

#nav li.about a:link, #nav li.about a:visited {background:url(../img/icon_me.png) no-repeat 10px 5px; display:block;}
#nav li.about a:hover, #nav li.about a:active {background:url(../img/icon_me.png) no-repeat 10px -105px;}

То, что я хочу, это как-то настроить таргетинг на каждую ссылку при нажатии, чтобы быть выбранным элементом, что-то вроде $('#nav li a').click(function(){ $('#nav li').removeClass('active'); $(this).parent().addClass('active'); });

проблема в этом коде в том, что он вызывает новый фон позади текущего!

есть ли способ фактически удалить текущий фон, когда я щелкаю, и заменить его на тот, который используется при наведении?

Заранее большое спасибо, через этот сайт я выучил и исправил множество проблем!

Ответы [ 2 ]

1 голос
/ 06 июня 2011

Большое вам спасибо @ Alfie-101, ваше решение вдохновило меня, не уверен, что мой подход достаточно аккуратный, но он работает как шарм 

$('#nav li').addClass('inactive');

$('#nav li a').click(function(){

    $('#nav li').removeClass('active').addClass('inactive');

    $(this).parent().removeClass('inactive').addClass('active');

    });`
1 голос
/ 06 июня 2011

Вы можете попробовать это: 

$('#nav li a').toggle(

        function() {

            $('#nav li').removeClass('inactive').addClass('active');

            },
        function() {

            $('#nav li').addClass('inactive').removeClass('active');
        }

    );

С различными фонами для каждого «активного» и «неактивного» * ​​1004 *

Вы также можете посмотреть на .toggleClass() Jquery toggleClass

...