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

#javascript #html #internet-explorer

#javascript #HTML #internet-explorer

Вопрос:

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

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

1. Вы выбираете элемент перед его отображением…..

2. Я переместил скрипт внизу, но мой вопрос по-прежнему заключается в том, как отобразить условие href. Мне нужно показывать указатель мыши вместо href для определенного значения параметра.

3. понятия не имею, что вы имеете в виду, он должен показывать наведение…..

4. @epascarello мое требование — показывать гиперссылку только для некоторых ролей пользователей. Если у пользователя нет определенных привилегий, вместо отображения гиперссылки я хочу показать указатель мыши, сообщающий, что «Ссылка для вас недоступна»

Ответ №1:

Сначала удалите 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>

Ответ №2:

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

1. спасибо за обновление, но я все еще не хочу, чтобы пользователь нажимал на ссылку, когда accessCode == 10. hideElem.href = ‘#’; все равно переведет пользователя в следующее окно. В принципе, я хочу отключить ссылку и показывать наведение на нее.

2. @MSV ты пробовал этот фрагмент? Нажатие на ссылку никуда не перенаправит пользователя

Ответ №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>