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中文网网站的支持！