Question

我有一个导航栏，它使用JavaScript来跟踪其状态并相应地更新文本和光标样式属性。这适用于Firefox 26.0，但不适用于Chrome 32.0.1700.76;在Chrome中，它似乎什么都不做。一个说明这一点的简短脚本是：

var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
var foo_on = true;

function turn_on(x) {
    x.style = "color: #42A6FF; cursor: pointer;";
    x.onmouseover = function () { x.style = "color: #444444; cursor: pointer;"; };
    x.onmouseout = function () { x.style = "color: #42A6FF; cursor: pointer;"; };
}

function turn_off(x) {
    x.style = "color: #BBBBBB; cursor: default;";
    x.onmouseover = null;
    x.onmouseout = null;
}

function toggle(caller) {
    if((foo_on && caller == 'bar') || (!foo_on && caller == 'foo')){ return; }
    if(foo_on){        
        turn_off(foo);
        turn_on(bar);
    }
    else{        
        turn_on(foo);
        turn_off(bar);
    }
    foo_on = !foo_on;
}

function init() {
    foo_on = true;
    turn_on(foo);
    turn_off(bar);
}

window.onload = init();

我的文档布局是：

<html>
    <head>      
        <title>Test</title>        
    </head>
    <body>
        <div style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;' unselectable='on'> 
            <a id="foo" onclick="toggle('foo')"> FOO </a>
            <a id="bar" onclick="toggle('bar')"> BAR </a>
        </div>
        <script> {code above} </script>
    </body>
</html>

这是http://jsfiddle.net/TF9X7/的现场直播。为什么这不能在Chrome中运行（或Firefox有什么错误原谅我）？

Answer 1

或者做得对，并使用班级......


我是JavaScript的新手;你能详细说明或提供参考吗？

不是直接通过JS设置样式值，而是使用某个类名在CSS中定义它们 - 然后为元素设置或删除该类名：

CSS：

a { color: #BBBBBB; cursor: default; }
a.on { color: #42A6FF; cursor: pointer; }
a.on:hover { color: #444444; };

JS：

function turn_on(x) {
    x.className = "on";
}

function turn_off(x) {
    x.className = "";
}

http://jsfiddle.net/TF9X7/2/

Answer 2

我更改了脚本的某些部分。而不是关闭window.onload，使用body onload（<body onload="Init()">）。浏览器首先需要渲染DOM以捕获对象。

在函数Init（）中，我更改为再次捕获元素，因为Chrome返回null，并且我更改了设置样式属性的方式，正确的是object.style.property。

<script>
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
var foo_on = true;

function turn_on(x) {
    x.style.color = "#42A6FF";
    x.style.cursor = "pointer";
    x.onmouseover = function () {
        x.style.color = "#444444";
        x.style.cursor = "pointer";
    };
    x.onmouseout = function () {
        x.style.color = "#42A6FF";
        x.style.cursor = "pointer";
    };
}

function turn_off(x) {
    x.style.color = "#BBBBBB";
    x.style.cursor = "default";
    x.onmouseover = null;
    x.onmouseout = null;
}

function toggle(caller) {
    if((foo_on && caller == 'bar') || (!foo_on && caller == 'foo')){
        return;
    }
    if(foo_on){        
        turn_off(foo);
        turn_on(bar);
    }
    else{        
        turn_on(foo);
        turn_off(bar);
    }
    foo_on = !foo_on;
}

function init() {
    foo = document.getElementById('foo');
    bar = document.getElementById('bar');
    foo_on = true;
    turn_on(foo);
    turn_off(bar);
}

body.onload = init();
</script>

但我建议你使用CBroe的方式

通过JavaScript更改文本和光标样式：浏览器兼容性问题

2 个答案: