爲什麼樣式效果在Firefox中的location.hash之後仍然存在？

我正在創建一個在線設計的在線心理實驗程序。（請看下面的代碼）我想要做的是，如果用戶點擊某個輸入框，它會調用onFocus事件，然後頁面跳轉到那個位置（即框到達頁面的頂部），並且該框對其輪廓有一些影響，表明它具有焦點。
我可以使用location.hash，anchor和style.outline來實現。爲什麼樣式效果在Firefox中的location.hash之後仍然存在？

但是，在Firefox中，一旦頁面跳轉到錨定點，即使我有一個事件onBlur刪除大綱樣式，大綱樣式仍然存在。有誰知道爲什麼發生這種情況，以及如何解決它？此問題的大多數相關函數是代碼中的jump（）和noeffect（）。

這適用於Chrome和Safari，但不適用於Firefox。（IE也沒有工作，IE甚至沒有顯示大綱樣式，如果你知道如何在IE中修復，請讓我知道）最好，我希望我的程序可以在所有主流瀏覽器中使用。

在此先感謝！

--------- -----------代碼

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" > 
function loadings() { 
var bcolor = "#000000 "; 
var bstyle = "solid "; 
var bthick = "2px "; 

document.getElementById("one").innerHTML = "<div>UserID:</div><div><input style='width: 80px; border: "+bthick+bstyle+bcolor+";' id='us' name='us' type='text' /></div>"; 
document.getElementById("two").innerHTML = "<div>password:</div><div><input style='width: 80px; border: "+bthick+bstyle+bcolor+";' id='pw' name='pw' onfocus='jump(\"one\", \"pw\");' onBlur='noeffect(\"pw\")'; type='password' /></div>"; 

document.getElementById('us').focus(); 
} 

function jump(str, id){ 
    location.hash = str; 
    document.getElementById(id).style.outline = "red solid 2px"; 
    //settimeout(noeffect(id), 1000); 
} 

function noeffect(id){ 
    document.getElementById("pw").style.outline = "green solid 5px"; 
} 

</script> 
<style type="text/css"> 
input:focus {outline: orange solid 2px;} 
</style> 
</head> 

<body onload = "loadings();"> 
<p> 
click password box. Then it will jump to #pw (or somewhere else is fine), <br/> 
and focus is on password box (some effect will happen on outline). <br/> 
If you click userID box, I want effect to disappear, but it remains. How should I fix? 
</p> 

<table border="1"> 
<tbody> 
    <tr> 
    <td style="vertical-align:top;"><div id="one"> </div></td> 
    <td style="text-align: right; vertical-align:top;"><div id="two"></div></td> 
    </tr> 
    <tr> 
    <td style="vertical-align:bottom;"><div id="three"></div></td> 
    <td style="text-align: right; vertical-align:bottom;"><div id="four"></div></td> 
    </tr> 
</tbody> 
</table> 
</body> 
</html>

來源

2011-02-07 user605660

你能提供現場演示嗎？ – 2011-02-07 17:48:54

http://jsfiddle.net/Mutant_Tractor/3T6ry/ - 演示 – 2011-02-07 17:52:32

我不知道這是否解決您的問題，但通常的location.hash包括＃符號，所以我認爲您應該指定"#one"而不是"one"。

此外，在Firefox中，您可以選擇使用onhashchange事件來改變自己的風格。 https://developer.mozilla.org/en/DOM/window.onhashchange

來源

2011-02-07 18:36:30

爲什麼樣式效果在Firefox中的location.hash之後仍然存在？

回答

相關問題