在不重新加载页面的情况下更改 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 显示/隐藏来“过滤”左侧的地图内容——因此我需要这个解决方案。

提前致谢！

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);
}