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循环更清晰。失败的是将一个字符串赋给style属性。这看起来是一个不可移植的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';
}

更新

在IE9之前IE似乎没有支持

document.getElementsByClassName()。这就是为什么每个人都非常喜欢jQuery。

此外，更简洁，更明确的方法可能是在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;"

或调用函数

变色在Firefox上运行，但不适用于IE或Chrome

3 个答案: