我的HTML文件中有这样的导航代码:
<div id="center_links">
<ul>
<li><a href="#" onMouseOver="javascript:setSideText(1)">about</a></li>
<li><a href="blog" onMouseOver="javascript:setSideText(2)">blog</a></li>
......等等。
我的Javascript看起来像这样:
function setSideText(setting)
{
if (setting == 0) // Home
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>';
}
else if (setting == 1) // About
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>';
}
else if (setting == 2) // Blog
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the <a href="http://chyrp.net/">Chyrp</a> blog software.';
}
当我鼠标悬停链接时,我页面上的旁边文字会更改以描述该链接。当我没有将鼠标悬停在导航链接上时,我希望文本更改回默认值(setSideText(0)
)。我现在已经玩了一段时间了,我还没能弄明白。
我尝试将此添加到javascript文件中,但无济于事:
document.getElementById('center_links').onMouseOut = setSideText(0);
无论如何,我认为它不会起作用。
我确定这是一个我没想到的简单解决方案(我只是选择了语言)。任何指导表示赞赏!
答案 0 :(得分:1)
这不起作用的唯一原因是因为在Javascript中设置这些DOM事件时,没有大写;只需将.onMouseOut
更改为.onmouseout
。
我不知道为什么他们决定在这些事件的HTML和Javascript名称之间不一致。 (我想,人们讨厌DOM的另一个原因。)
答案 1 :(得分:1)
你需要触发函数onMouseOut,就像触发函数onMouseOver一样
您的链接HTML需要如下所示:
<a href="blog" onMouseOver="javascript:setSideText(2)" onMouseOut="javascript:setSideText(0)">blog</a>
我建议在这样的东西中查看jQuery - 它使处理事件和DOM操作更加直接!
这里有一个很棒的免费课程:http://tutsplus.com/course/30-days-to-learn-jquery/
答案 2 :(得分:1)
我提出两个主要建议,第一个:不要使用内联事件处理程序(将行为放在一个地方更容易维护),第二个是在父onmouseout
上使用center_links
1}}元素。
为此目的:
function setSideText(setting) {
if (setting == 0) // Home
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>';
}
else if (setting == 1) // About
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>';
}
else if (setting == 2) // Blog
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the <a href="http://chyrp.net/">Chyrp</a> blog software.';
}
}
var linksElem = document.getElementById('center_links'),
links = linksElem.getElementsByTagName('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].dataIndex = i+1;
links[i].onmouseover = function() {
setSideText(this.dataIndex);
};
}
linksElem.onmouseout = function(){
setSideText(0);
}
编辑修改setSideText()
函数以回复单词而非索引(因为我认为以后添加后续链接更容易,并且不依赖于能够向元素添加任意属性,但 要求元素具有id
属性...):
function setSideText(setting) {
if (setting == 'home' || setting == 0)
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>';
}
else if (setting == 'about')
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>';
}
else if (setting == 'blog')
{
document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the <a href="http://chyrp.net/">Chyrp</a> blog software.';
}
}
var linksElem = document.getElementById('center_links'),
links = linksElem.getElementsByTagName('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].onmouseover = function() {
setSideText(this.id);
};
}
linksElem.onmouseout = function(){
setSideText(0);
}