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

时间:2014-04-03 17:16:06

标签: javascript html5 internet-explorer google-chrome cross-browser

我正在努力弄清楚为什么这不适用于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>

非常感谢任何帮助。

3 个答案:

答案 0 :(得分:2)

我会尝试使用普通的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>

答案 1 :(得分:0)

在javascript中更改样式时,需要设置样式的各个组件。像这样:

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

答案 2 :(得分:-1)

只需使用类似的东西:

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

而不是

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

或调用函数