Отображать Hover вместо Href для условной проверки
У меня есть очень простое требование к 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>
Я переместил скрипт внизу, но мой вопрос по-прежнему заключается в том, как отобразить условное обозначение href. Мне нужно показать hove вместо href для определенного значения параметра.
понятия не имею, что вы имеете в виду, он должен показывать наведение.....
@epascarello мое требование - показывать гиперссылку только для некоторых ролей пользователей. Если у пользователя нет определенных привилегий, вместо того, чтобы показывать гиперссылку, я хочу показать наведение, говорящее, что «Ссылка для вас недоступна»
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Если вы хотите создать всплывающую подсказку, которая отображается при наведении курсора на ссылку, назначьте свойство 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>спасибо за обновление, но я все еще не хочу, чтобы пользователь нажимал на ссылку, когда accessCode == 10. скрытьЭлем.href = '#'; все равно приведет пользователя к следующему окну. В основном я хочу отключить ссылку и показать наведение на нее.
@MSV ты пробовал этот фрагмент? Переход по ссылке никуда не перенаправит пользователя
Попробуйте сделать тест с кодом ниже.
<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>Сначала удалите цель = "_ пусто" из ссылки, и если вы не хотите, чтобы пользователь перенаправлялся наверх страницы. Вы можете использовать JavaScript: пустота (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>
Вы выбираете элемент перед его визуализацией.....