JS:<a>链接禁止跳转

最新推荐文章于 2024-07-23 03:56:56 发布

牟童

最新推荐文章于 2024-07-23 03:56:56 发布

阅读量5.1k

点赞数 2

本文链接：https://blog.csdn.net/c9316/article/details/81480186

版权

要求是点击a链接，实现图片的变换。

那么方法是在点击（onclick）a链接时，通过一个方法实现图片变换

原代码为：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>just a practice</title>	
</head>
<body>
	<a href="#" onclick="fn()" style="display:block;">点击切换图片</a>
	<img src="cup.jpg" id="box" alt=""/>
	<script>
		function fn(){
			var a=document.getElementById("box");
			a.setAttribute("src","oil.png");
		}
	</script>
</body>
</html>

ok的可以实现打开浏览器是这样子：

点击文字，显示为：

氮素！

如果，我把原代码中img的href属性改为：http://www.baidu.com

结果，当我点击文字时，图片也会变换，但最终都是跳转到百度去了，那么，如何让href属性不生效呢？那就是在onclick属性中添加return false;

代码为：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>just a practice</title>	
</head>
<body>
	<a href="http://www.baidu.com" onclick="fn();return false;" style="display:block;">点击切换图片</a>
	<img src="cup.jpg" id="box" alt=""/>
	<script>
		function fn(){
			var a=document.getElementById("box");
			a.setAttribute("src","oil.png");
		}
	</script>
</body>
</html>

就好了。

如果将return false放到fn()函数里面，也是不生效的。原因……不知道诶……

还有另外一种代码，是视频里老师用的：

<body>
	<a href="http://www.baidu.com" style="display:block;">点击切换图片</a>
	<img src="cup.jpg" id="box" alt=""/>
	<script>
	var a=document.getElementsByTagName("a")[0];
	var box=document.getElementById("box");
	a.onclick=function(){
		box.src="oil.png";
		return false;
	}
	</script>
</body>

效果是一样一样的~~~

牟童

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS:<a>链接禁止跳转

要求是点击a链接，实现图片的变换。那么方法是在点击（onclick）a链接时，通过一个方法实现图片变换原代码为：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;just a practice&lt;/title&a
复制链接

扫一扫