用z-index属性使连接不可点

时间 2019-12-24

标签 index 属性连接不可繁體版

原文原文链接

今天在作页面时，想让某个元素内的连接暂时不可点（并且是彻底不响应连接的经常使用事件）。开始只能想到用写js去取消连接事件的默认动做。可是要写好多js代码，总以为这样作太土了。html

后来想到，若是让鼠标根本就够不着那个连接，那么这个连接就不会响应任何事件，固然我也不能让这个连接隐藏起来。因此我想到的盒模型里的z-index属性：让连接凹陷到页面里面，鼠标就够不着了。ui

盒模型中，当元素的position取值为relative和absolute还有fixed时z-index起做用。根据个人须要，我让连接的position取relative，而后用js根据须要改变连接的z-index值，就能自如的控制连接是否可点了。演示代码以下：this

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>用z-index属性让连接不可点</title>
		<style>a{position:relative;}</style>
	</head>
	<body>
		<ul>
			<li><a href="http://www.google.com">连接不可点</a></li>
			<li><button id="button">让连接不可点</button></li>
		</ul>
	</body>
	<script>
		var a = document.getElementsByTagName("a")[0];
		var button = document.getElementById("button");
		button.onclick = function(){
			if(this.innerHTML == "让连接不可点"){
				a.style.zIndex = "-1";
				this.innerHTML = "让连接可点";
			}else{
				a.style.zIndex = "0";
				this.innerHTML = "让连接不可点";
			}
		}
	</script>
</html>