用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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。