问候!
我找到了一个很好的答案的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“过滤”左侧的地图内容 - 因此我需要这个解决方案。
提前致谢!
答案 0 :(得分:1)
你只需要:
function changeColor(idNum) {
var css = '.sIFR-root { color:#522d24; }';
sIFR.replacements['h6'][idNum].changeCSS(css); // change to brown color
}
答案 1 :(得分:0)
有了这个工作,我解决了另一个问题。
我需要在加载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);
}