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小游戏之仙剑翻牌源码,是一款比较经典的卡牌类游戏,对于javascript游戏设计有不错的借鉴价值,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了SpringMVC返回json数据的三种方式的相关资料,需要的朋友可以参考下2015-12-12
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
这篇文章主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setData动态修改Page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下2017-12-12
本文给大家整理了很多关于js数组方法reduce的经典代码片段，能够让大家更好的理解reduce的实例用法，一起学习下吧。2018-01-01
今天，这篇文章将利用HTML，CSS，JS的知识编写一个童年经典游戏 - 推箱子，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2022-11-11
本篇文章给大家分享了关于javascript代码优化的8点总结，希望我们整理的内容能够帮助到大家。2018-01-01
这篇文章主要介绍了前后端常见的几种鉴权方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
阿拉伯数字如何转为中文大写这个实现的方法有很多，在本文将为大家介绍下js中时如何实现的，感兴趣的朋友可以参考下2013-09-09
这篇文章主要介绍了JavaScript输入分钟、秒倒计时的代码实现，通过css和js代码展示了逻辑过程，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-08
作用域（scope）是javascript中一项令人棘手的的特性。所有面向对象编程语言都有某种形式的作用域，不过和把这个概念放在什么上下文中有关。在javascript里，作用域是由函数划分的。2009-06-06
最新评论