Fixa så att hoverbild även är aktiv när den har klickats på?

2 svar · 457 visningar · startad av bassebhu 20 maj 2012

bassebhuMedlem sedan nov. 20016 480 inlägg

Frågan20 maj 2012 09:55#1

Hallå!

Jag har en meny som laddar in olika divar beroende på vad som klickas på. Varje menyelement består av en bild som är vanliga läget (a) och en som ligger gömd inuti a som är hoverläget (span). Hovern funkar, men jag skulle vilja att om det aktuella menyobjektets li har klassen "active" så ska den dolda menybilden vara den aktiva. Utöver detta skulle jag vilja att om man sedan hovrar över en av de inaktiva menyobjekten så ska den hovra upp och den aktiva tillfälligt hovra ner. Om man inte klickar på den inaktiva som man hovrade över och sedan går av den så ska den aktiva lysa upp igen.

Jag använder följande kod:

	$("header a")
	.find("span")
	.hide()
	.end()
	.hover(function() {
		$(this).find("span").stop(true, true).fadeIn();
	}, function() {
		$(this).find("span").stop(true, true).fadeOut();
	});

Mina nivåer ser ut såhär:
header > nav > ul > li > a > span

Hela content-utbytandet och hovrandet funkar som sagt. När man klickar på ett menyobjekt så får resp li klassen "active".

Med min kod ovan, hur ser jag till att li.active span är synlig för valt objekt, samt hovrar ut tillfälligt om något annat menyobjekt hovras över?

Tack för hjälpen och tålamodet med att tolka min beskrivning :D

bassebhuMedlem sedan nov. 20016 480 inlägg

20 maj 2012 14:34#2

Här är mitt contentbytarscript om det hjälper:

    function contentSwitcher(settings){
        var settings = {
           contentClass : '.content',
           navigationId : '#access'
        };
 
        //Hide all of the content except the first one on the nav
        $(settings.contentClass).not(':first').hide();
        $(settings.navigationId).find('li:first').addClass('active');
 
        //onClick set the active state, 
        //hide the content panels and show the correct one
        $(settings.navigationId).find('a').click(function(e){
            var contentToShow = $(this).attr('href');
            contentToShow = $(contentToShow);
 
            //dissable normal link behaviour
            e.preventDefault();
 
            //set the proper active class for active state css
            $(settings.navigationId).find('li').removeClass('active');
            $(this).parent('li').addClass('active');
 
            //hide the old content and show the new
            $(settings.contentClass).fadeOut(500);
            contentToShow.delay(500).fadeIn(1000);
        });
    }
    contentSwitcher();

Som ni ser sätts .active på den li som är aktiv, men hur får jag det att jobba ihop med min hoverkod ovan?

Tack!

bassebhuMedlem sedan nov. 20016 480 inlägg

20 maj 2012 18:56#3

Fullösning eller icke, för mig räknas det om det funkar :birp

	$("header a")
	.find("span")
	.hide()
	.end()
	.hover(function() {
		$(this).parent('.inactive').find("span").stop(true, true).fadeIn();
		$('header a').not(this).parent('.active').find("span").stop(true, true).fadeOut();
	}, function() {
		$(this).parent('.inactive').find("span").stop(true, true).fadeOut();
		$('header a').not(this).parent('.active').find("span").stop(true, true).fadeIn();
	});

    function contentSwitcher(settings){
        var settings = {
           contentClass : '.content',
           navigationId : '#access'
        };
 
        //Hide all of the content except the first one on the nav
        $(settings.contentClass).not(':first').hide();
        //$(settings.navigationId).find('li:first').addClass('active');
 
        //onClick set the active state, 
        //hide the content panels and show the correct one
        $(settings.navigationId).find('a').click(function(e){
            var contentToShow = $(this).attr('href');
            contentToShow = $(contentToShow);
 
            //dissable normal link behaviour
            e.preventDefault();
 
            //set the proper active class for active state css
            $(settings.navigationId).find('li').removeClass('active').addClass('inactive');
            $(this).parent('li').removeClass('inactive').addClass('active');
 
            //hide the old content and show the new
            $(settings.contentClass).fadeOut(500);
            contentToShow.delay(500).fadeIn(1000);
        });
    }
    contentSwitcher();