Отображение Hover вместо Href для условной проверки - PullRequest
Новая
       3

Отображение Hover вместо Href для условной проверки

1 голос
/ 14 марта 2019

У меня есть очень простое требование html, при котором для некоторого значения параметра мне нужно скрыть гиперссылку на текст и показать указатель на текст.

Ниже приведен мой тестовый html. Как мне обработать мой Javascript, где, когда accesscode = 10, я должен показывать только hover, а не 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>

Ответы [ 3 ]

1 голос
/ 14 марта 2019

Сначала удалите target = "_ blank" , а также из ссылки, и если вы не хотите, чтобы пользователь перенаправлял в начало страницы.Вы можете использовать javascript: void (0) внутри тега href, чтобы избежать этого

Попробуйте это: 

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>
1 голос
/ 14 марта 2019

Если вы хотите создать всплывающую подсказку, которая отображается при наведении курсора на ссылку, присвойте свойство 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>
0 голосов
/ 14 марта 2019

Попробуйте сделать тест с кодом ниже. 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...