700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html中点击导航栏变色 JavaScript实现鼠标点击导航栏变色特效

html中点击导航栏变色 JavaScript实现鼠标点击导航栏变色特效

时间:2019-11-25 03:29:15

相关推荐

html中点击导航栏变色 JavaScript实现鼠标点击导航栏变色特效

废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示:

JAVASCRIPT之导航栏鼠标点击变色特效

body {

font-size:12px;

font-family: Arial, Helvetica, sans-serif;

}

.ts_seled {

color: #F00;

}

.ts_sel {

color:#666;

}

window.onload = initLinkStyle;

function initLinkStyle() {

if(document.getElementsByName('myset')){

var arrLink = document.getElementsByName('myset');

for(i = 0; i < arrLink.length; i++) {

var link = arrLink[i];

link.className='ts_sel';

link.onclick = clickNav;

}

}

}

/**

* 执行点击事件

* @param {Object} event 鼠标事件

*/

function clickNav(event) {

var target = event.currentTarget;

//上次选择的a的样式

if(document.getElementsByName('myset')){

var arrLink = document.getElementsByName('myset');

for(i = 0; i < arrLink.length; i++) {

var link = arrLink[i];

if(link.className == 'ts_seled') {

link.className = 'ts_sel';

}

}

}

target.className = 'ts_seled';

return false;//阻止浏览器默认事件

}

首页

联系我们

帮助

以上所述是小编给大家介绍的JavaScript实现鼠标点击导航栏变色特效,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对JavaScript中文网网站的支持!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。