在Firefox上可以更改颜色，但在IE或Chrome上不能

Question

我很难弄清楚为什么它在chrome或IE上不起作用，但是在firefox中很好用。 本质上，我有一个导航栏，突出显示了单击的链接，直到单击了另一个链接

这是我的JS函数：

function updateObjectIframe(which){
    document.getElementById('one').innerHTML = '<'+'object id="foo" style="height:100%;width:100%;" name="foo" type="text/html" data="'+which.href+'"><\/object>';
    var Elements = document.getElementsByClassName('button');
    Array.prototype.filter.call(Elements, function(Element){
       Element.style = "background: #F0E68C;color: black;";
    });
    which.style = "background: #333; color: #fff;";
} 

我的导航栏如下所示。 页面被加载到id“ one”中。

<div id="menu">
    <ul>
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li>
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li>
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li>
    </ul>
</div>

<div id="one" style="height:95%;width:100%;">
    <object id="foo" name="foo">

    </object>
</div>

任何帮助将不胜感激。

Answer 1

我会尝试使用普通的JavaScript技术重写它。 如果您避免任何聪明的事情，那么您永远是最安全的。 以下内容在Chrome和IE9中具有预期的（或我推断的预期）视觉效果。 您的奇数循环构造在这两种方法中都起作用，但是常规的for循环更加清晰。 失败的是为样式属性分配了一个字符串。 那似乎是不可移植的Firefox扩展。

function updateObjectIframe(which){
    document.getElementById('one').innerHTML = '<'+'object id="foo" style="height:100%;width:100%;" name="foo" type="text/html" data="'+which.href+'"><\/object>';
    var elements = document.getElementsByClassName('button');
    for ( var i = 0; i < elements.length; ++i ) {
         var element = elements[i];
         element.style.background = '#F0E68C'
         element.style.color = 'black';
    }
    which.style.background = '#333';
    which.style.color = '#fff';
} 

UPDATE

IE9之前的IE似乎不支持document.getElementsByClassName() 。 这就是每个人都这么爱jQuery的原因。

同样，一种更style ，绝对更时髦的方法可能是在style标签中设置两种CSS样式：一种用于“活动”按钮，一种用于“非活动”按钮。 然后，您将更改元素的className属性，并使用不同的方式来收集“按钮”元素（因为它们现在将具有不同的类，并且getElementsByClassName也不可移植）：

<script language="JavaScript">
    function updateObjectIframe(which){
        document.getElementById('one').innerHTML = '<'+'object id="foo" style="height:100%;width:100%;" name="foo" type="text/html" data="'+which.href+'"><\/object>';
        var elements = menu.getElementsByTagName('a');
        for ( var i = 0; i < elements.length; ++i ) {
            elements[i].className = 'button';
        }
        which.className = 'selected-button';
    } 
</script>
<style type="text/css">
#menu a.button{
    background-color: #F0E68C;
    color: black;
}
#menu a.selected-button
{
    background-color: #333;
    color: #fff;
}
</style>

Answer 2

在javascript中更改样式时，需要设置样式的各个组成部分。 像这样：

...
Element.style.background = "#F0E68C";
Element.style.color = "black";
...
which.style.background = "#333"
which.style.color = "#fff";
...

Answer 3

只是使用像这样的东西：

onlick="$(".classWhichAllYourLinksHave").style("background","WhatEverYouUse")this.style = "background: #F0E68C;color: black;"" 

代替

onclick="updateObjectIframe(this); return false;" 

或调用一个函数