在没有页面重新加载的情况下更改sIFR“当前项目”颜色

Question

问候！

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

我正在尝试更改列表中单个sIFR导航项的颜色以使其具有不同的颜色，而无需重新加载页面 - 因此其他人必须“关闭”（颜色重置为默认值） 。有什么想法吗？

// 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 show / hide“过滤”左侧的地图内容 - 因此我需要这个解决方案。

提前致谢！

Answer 1

你只需要：

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

Answer 2

有了这个工作，我解决了另一个问题。

我需要在加载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);
}