1
votes

Afficher le survol au lieu de Href pour le contrôle conditionnel

J'ai une exigence html très basique où sur une valeur de paramètre, je dois cacher le lien hypertexte sur le texte et afficher le survol sur le texte.

Voici mon test html.Comment dois-je gérer mon Javascript où quand accesscode = 10, je devrais afficher uniquement le survol et non 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>

javascript html internet-explorer

4 commentaires

Vous sélectionnez l'élément avant son rendu .....

J'ai déplacé le script en bas mais ma question est toujours de savoir comment afficher le conditionnel href. J'ai besoin d'afficher hove au lieu de href pour une certaine valeur de paramètre.

aucune idée de ce que vous voulez dire, cela devrait montrer le survol .....

@epascarello mon exigence est d'afficher le lien hypertexte pour certains rôles d'utilisateur uniquement. Si l'utilisateur ne dispose pas de privilèges spécifiques au lieu d'afficher le lien hypertexte, je veux afficher le survol en disant que `` Le lien n'est pas disponible pour vous ''

3 Réponses :

1
votes

Si vous souhaitez créer une info-bulle qui s'affiche lorsque vous survolez le lien, attribuez la propriété title .

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

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

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';
}

2 commentaires

merci pour la mise à jour mais je ne veux toujours pas que l'utilisateur clique sur le lien lorsque accessCode == 10. hideElem.href = '#'; amènera toujours l'utilisateur à la fenêtre suivante. Fondamentalement, je veux désactiver le lien et afficher le survol dessus.

@MSV avez-vous essayé cet extrait? Cliquer sur le lien ne redirigera l'utilisateur nulle part

0
votes

Essayez de faire un test avec le code ci-dessous.

<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>

0 commentaires

1
votes

Commencez par supprimer target = "_ blank" du lien et si vous ne souhaitez pas que l'utilisateur redirige vers le haut de la page. Vous pouvez utiliser javascript: void (0) dans la balise href pour éviter cela

Essayez ceci:

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

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

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';
}

0 commentaires