javascript实现链接单选效果的方法
更新时间：2015年05月13日 15:32:08 作者：永远爱好写程序
这篇文章主要介绍了javascript实现链接单选效果的方法,可实现点击链接改变其背景色的功能,同时可禁用对应链接的跳转,需要的朋友可以参考下
本文实例讲述了javascript实现链接单选效果的方法。分享给大家供大家参考。具体实现方法如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接单选</title>
<script type="text/javascript">
function IniEvent() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onclick = LinkOnClick;
}
}
function LinkOnClick() {
var links = document.getElementsByTagName("a");
//links在两个地方用到了(IniEvent也用到了),
//注意，不要把links放到全局变量中，
//尽量不要用全局变量，
//如果重复性代码太多，将代码放到一个公共函数中
for (var i = 0; i < links.length; i++) {
if (links[i] == this) {
links[i].style.background = "red";
}
else {
links[i].style.background = "white";
}
}
window.event.returnValue = false;//防止导航到网站
}
</script>
</head>
<body onload="IniEvent()">
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.sohu.com">搜狐</a><br />
<a href="https://www.jb51.net">脚本之家</a><br />
<a href="http://www.tudou.com">土豆</a><br />
<a href="http://www.csdn.com">CSDN</a><br />
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要介绍了JS highcharts实现动态曲线代码示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
这篇文章主要为大家介绍了JavaScript实现移动端禁止下拉露出网址或的广告屏蔽技巧示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
实现select跳转的方法有很多，本例为大家介绍的是js实现的，通过location.href获取跳转地址，需要的朋友可以看看2014-10-10
本文主要介绍了js实现下一页页码效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
参考：关于Javascript中实现暂停的几篇文章...2007-03-03
JavaScript中Object、map、weakmap的区别分析
这篇文章主要介绍了JavaScript中Object、map、weakmap的区别分析，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-12-12
JavaScript 通过Ajax 动态加载CheckBox复选框
本文通过实例代码给大家介绍了JavaScript 通过Ajax 动态加载CheckBox复选框的方法，需要的朋友参考下吧2017-08-08
JS模块与命名空间的介绍，需要的朋友可以参考一下2013-03-03
下面小编就为大家带来一篇json传值以及ajax接收详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了JS实现简单计数器，有加、减和零三个按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论