Bu derste JavaScript ile bir HTML sayfasında verilmiş olan bir bağlantının nasıl pasif hale getirilebileceğini göstereceğim.
Aşağıdaki örnekte CSS özellikleri değiştirilerek bağlantı verilen yazı pasif hale getirilmiştir.
Aşağıdaki kodları kopyalayarak sayfayı çalıştırıp link durumunu inceleyebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<title>
JS Link disabled
</title>
<style>
a.disabled {
pointer-events: none;
}
</style>
</head>
<body style=”text-align:center;”>
<h1 style=”color:red;”>
www.yazilimkodlama.com
</h1>
<a href=”https://www.yazilimkodlama.com/” id=”linkId” target=”_blank”>
LINK
</a>
<br /><br />
<button onclick=”disableLink()”>
disable
</button>
<p id=”linkStatus” style=”color:green; font-size: 20px; font-weight: bold;”></p>
</body>
</html>
<script>
let link = document.getElementById(‘linkId’);
let down = document.getElementById(‘linkStatus’);
function disableLink() {
link.setAttribute(‘class’, ‘disabled’);
link.setAttribute(‘style’, ‘color: black;’);
down.innerHTML = ‘Link disabled’;
}
</script>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html> <head> <title> JS Link disabled </title> <style> a.disabled { pointer-events: none; } </style> </head> <body style=“text-align:center;”> <h1 style=“color:red;”> www.yazilimkodlama.com </h1> <a href=“https://www.yazilimkodlama.com/” id=“linkId” target=“_blank”> LINK </a> <br /><br /> <button onclick=“disableLink()”> disable </button> <p id=“linkStatus” style=“color:green; font-size: 20px; font-weight: bold;”></p> </body> </html> <script> let link = document.getElementById(‘linkId’); let down = document.getElementById(‘linkStatus’); function disableLink() { link.setAttribute(‘class’, ‘disabled’); link.setAttribute(‘style’, ‘color: black;’); down.innerHTML = ‘Link disabled’; } </script>
|
