2017-10-03 4 views
0

Est-il possible d'utiliser les fonctions label et hyperlink sur le même texte? Fondamentalement, je veux basculer la case à cocher et faire défiler jusqu'à l'élément cible, en un seul clic et avec HTML seulement.Comportement d'étiquette et de liaison sur le même élément

Cependant, il semble qu'un seul comportement (label OU a) pourrait travailler à l'époque:

<label for="box"><a href="#target">Go to target</a> 
 
    <input type="checkbox" id="box"> 
 
</label> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
<h1 id="target">Target</h1>

Peut-être que ce n'est pas possible?

Répondre

1

<label id='label' for="box" href="#target" onclick='document.location = document.getElementById("label").getAttribute("href");'>Go to target 
 
    <input type="checkbox" id="box"> 
 
</label> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
<h1 id="target">Target</h1>

+0

Merci pour votre temps, mais je suis à la recherche de solution que HTML. –

+0

Pourquoi? Cette solution fonctionne avec tous les navigateurs, c'est javascript natif ... Je suis presque sûr qu'il n'y a aucun moyen de le faire seulement avec HTML, parce que la solution dont vous avez besoin utilise des événements, éléments ont un clic natif qui vous permet d'atteindre le lien href, mais l'étiquette n'a pas ce genre d'événements natifs – alexay68

+0

Je sais, mais l'exigence est que la page est fonctionnelle sans aucun script :( –