我正在努力弄清楚为什么这不适用于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>
非常感谢任何帮助。
答案 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;"
或调用函数