Изменение sIFR «Текущий элемент» Цвет без страницы Перезагрузка

Question

Приветствия!

Я нашел post similar to my problem, на который был приятно ответил, но он изменил цвет ВСЕ <h1> экземпляров с функцией javascript.

Я пытаюсь изменить цвет одного элемента sIFR'd nav в списке, чтобы иметь другой цвет, без перезагрузки страницы - так что остальные должны быть «отключены» (сброс цвета до значения по умолчанию)). Есть идеи?

// 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>-х, каждый с уникальным идентификатором (могут быть добавлены к каждому 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

Получили, что на работу, и я решил еще одну проблему.

Мне нужно было автоматически запустить функцию changeColor() на «текущем» элементе после загрузки sIFR. Поскольку я только передаю строку/номер 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 
}