Question

我有一个非常基本的html要求，其中某些参数值需要隐藏文本上的超链接，并在文本上显示悬停。

下面是我的测试html。我应该如何处理我的Javascript，当访问代码= 10时，我应该只显示悬停而不显示href？

<!DOCTYPE html>
<html>

<body>
<h1>test Heading</h1>
<p>Test screen.</p>

 <a id="tagUrl" class="button" href='https://growthModeltest.com' target="_blank" rel="MonthlyReport">Learn More</a>

</body>
<script>
var accessCode= 10;
var hideElem = document.getElementById("tagUrl");
if(accessCode == 10){
        //should not display the link, instead show the hover.
        hideElem.href = '#';
}

</script>
</html>

Answer 1

如果您要创建一个鼠标悬停在链接上时显示的工具提示，请分配title属性。

var accessCode = 10;
var hideElem = document.getElementById("tagUrl");
if (accessCode == 10) {
  //should not display the link, instead show the hover.
  hideElem.href = '#';
  hideElem.title = 'Link is not active now';
}

<h1>test Heading</h1>
<p>Test screen.</p>

<a id="tagUrl" class="button" href='https://growthModeltest.com' target="_blank" rel="MonthlyReport">Learn More</a>

Answer 2

首先也从链接中删除 target =“ _ blank” ，如果您不希望用户重定向到页面顶部。您可以在href标记内使用 javascript：void（0）来避免这种情况

尝试一下：

var accessCode = 10;
var hideElem = document.getElementById("tagUrl");
if (accessCode == 10) {
  //should not display the link, instead show the hover.
  hideElem.href = 'javascript:void(0)';
  hideElem.removeAttribute('target');
  hideElem.title = 'Link is not active now';
}

<h1>test Heading</h1>
<p>Test screen.</p>

<a id="tagUrl" class="button" href='https://growthModeltest.com' target="_blank" rel="MonthlyReport">Learn More</a>

Answer 3

尝试使用下面的代码进行测试。

<html>
<head>
    <title>Disable Link using JavaScript</title>
</head>
<body>
  
<h1>test Heading</h1>
<p>Test screen.</p>

 <a id="tagUrl" class="button" href='https://growthModeltest.com' target="_blank" rel="MonthlyReport">Learn More</a>

</body>
	
<script>
    var lnk = document.getElementById('tagUrl');
    var accessCode = 10;
	if (accessCode == 10) {
	lnk.title="'Link is not available for you";
    if (window.addEventListener) {
        document.addEventListener('click', function (e) {
            if (e.target.id === lnk.id) {
				
                e.preventDefault();         // Comment this line to enable the link tag again.
            }
        });
    }}
</script>
</html>

显示悬停而不是Href进行条件检查

3 个答案: