Ändern einer sIFR "Current Item" -Farbe ohne Neuladen der Seite

Question

Grüße!

Ich fand eine post similar to my problem, die schön beantwortet wurde, aber es änderte die Farbe aller <h1> Instanzen mit einer JavaScript-Funktion.

Ich versuche, die Farbe eines einzelnen sIFR-Nav-Elements in einer Liste zu ändern, um eine andere Farbe zu haben, ohne die Seite neu zu laden - also müssten die anderen "ausgeschaltet" werden (Farbeinstellung auf Standard)). Irgendwelche Ideen?

// Modified function from other post, obviously does not work 
function changeColor(idNum) { 
    var css = '.sIFR-root { color:#522d24; }'; 
    for (var i = 0; i < sIFR.replacements['a'+idNum].length; i++) { 
    sIFR.replacements['a'+idNum][i].changeCSS(css); // change to brown color 
    } 
} 

Ich versuche, eine Liste der Anker innerhalb von <h6> ‚s, die jeweils mit einem eindeutigen ID Ziel (kann zu jeder h6 hinzugefügt werden).

// sIFRized HTML list I am targeting, items are all teal color 
    <h6><a href="javascript:changeColor('0');" id="catLink0">Shop</a></h6> 
    <h6><a href="javascript:changeColor('1');" id="catLink1">Dine</a></h6> 
    <h6><a href="javascript:changeColor('2');" id="catLink2">Play</a></h6> 
    <h6><a href="javascript:changeColor('3');" id="catLink3">Services</a></h6> 

// sIFR replacement 
sIFR.replace(archerSemibold, { 
    selector: 'h6', 
    wmode: 'transparent', 
    css: ['.sIFR-root { background-color:#587b7c; color:#627d79; }' 
     ,'.brown { color:#542d24; }' 
     ,'a { text-decoration: none; color: #627d79; }' 
     ,'a:link { text-decoration:none; color: #627d79; }' 
     ,'a:hover { text-decoration:none; color: #5b1300; }' 
    ] 
}); 

Here is the page für den Fall, dass Sie einige Kontext möchten. Ich entscheide immer noch, wie ich den Karteninhalt auf der linken Seite "filtrieren" werde, entweder mit AJAX oder einem Javascript show/hide - daher meine Notwendigkeit für diese Lösung.

Vielen Dank im Voraus!

Answer 1

Kapiert zu arbeiten, und ich ein anderes Problem gelöst.

Ich musste meine changeColor() Funktion automatisch auf einem "aktuellen" Element ausführen, nachdem sIFR geladen hatte. Da ich nur eine Zeichenfolge/Nummer an changeColor() übergebe, war es eigentlich ganz einfach.

sIFR.replace(archerSemibold, { 
    selector: 'h6', 
    wmode: 'transparent', 
    css: ['.sIFR-root { background-color:#587b7c; color:#627d79; }' 
     ,'a { text-decoration: none; color: #627d79; }' 
     ,'a:link { text-decoration:none; color: #627d79; }' 
     ,'a:hover { text-decoration:none; color: #5b1300; }' 
     ], 
    onReplacement: function(){ 
     changeColor('0'); // safely re-styles default current item 
    } 
}); 

function changeColor(num) { 
    var defaultCSS = ['a:link { color:#627d79; text-decoration:none; }', 
         'a:hover { color:#522d24; }' 
        ]; 
    for (var i = 0; i < sIFR.replacements['h6'].length; i++) { 
     sIFR.replacements['h6'][i].changeCSS(defaultCSS); 
    } 

    var curCSS = ['a:link { color:#522d24; text-decoration:underline; }', 
        'a:hover { color:#627d79; }' 
       ]; 
    sIFR.replacements['h6'][num].changeCSS(curCSS); 
} 

Answer 2

Sie brauchen nur:

function changeColor(idNum) { 
    var css = '.sIFR-root { color:#522d24; }'; 
    sIFR.replacements['h6'][idNum].changeCSS(css); // change to brown color 
}