更改sIFR“当前项目”颜色无页面重新加载

Question

问候！

我发现了一个很好回答的post similar to my problem，但它改变了所有使用javascript函数的<h1>实例的颜色。

我想改变列表中单个sIFR'd导航项的颜色，使其具有不同的颜色，而无需重新加载页面 - 所以其他颜色将被“关闭”（颜色重置为默认值）。有任何想法吗？

// 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 
    } 
} 

我努力的目标锚定器的<h6>的，每个里面有一个唯一的ID列表（可以添加到每个H6）。

// 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万一你想要一些上下文。我仍然在决定如何“过滤”左侧的地图内容，无论是AJAX还是JavaScript显示/隐藏 - 因此我需要这个解决方案。

在此先感谢！

Answer 1

明白了工作，和我解决了另一个问题。

我需要的sIFR就装后在“当前”项目自动运行我changeColor()功能。由于我只是将字符串/数字传递给changeColor()，实际上它非常简单。

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

你只需要：

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