J'ai donc été chargé de créer une nouvelle version bootstrap du plan d'étage du bâtiment sur le Web et tout en essayant de rendre une zone DIV cliquable et de créer un lien vers une autre page, la balise d'ancrage utilisée pour créer le lien La mise en page div est foirée?
Voici mon code et une image
avant d'ajouter la balise d'ancrage autour du div
après avoir ajouté la balise d'ancrage autour du div
<div class="container">
<div class="row">
<a href="floor0.html">
<div class="item col-lg-4">
<p> floor zero </p>
<br>
<br>
<br>
<br>
</div>
</a>
p >
4 Réponses :
Essayez de lire ceci: met un div dans une ancre jamais correct? .
Si votre objectif est d'ouvrir un lien lorsque le div est cliqué, vous pouvez essayer de mettre un événement onClick = (window.location.href = 'link here') sur la balise div ou utiliser jQuery événement dans le script $ ('div'). click (function () {window.location.href = 'link here'});
vous pouvez à peu près tout mettre dans une ancre avec html 5 - cela empêche les gens d'utiliser javascript pour faire ce qu'une ancre fait déjà
Un autre inconvénient de l'approche onClick est que les navigateurs n'afficheront pas les mêmes options qu'avec une balise d'ancrage: le menu contextuel n'aura pas "Ouvrir le lien dans un nouveau tab "ou" Enregistrer le lien sous ... "et les raccourcis clavier comme CTRL + [clic sur le lien] ne fonctionneront pas non plus. Les utilisateurs mobiles ne pourront pas cliquer-et-maintenir pour ouvrir dans un nouvel onglet. La spécification HTML5 permet l'encapsulation des ancres avec précision afin que les clients puissent fonctionner comme prévu.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="item col-lg-4" data-location="floor0.html"> <p> floor zero </p> </div>
$(".item").click(function() {
window.location = $(this).data("location");
return false;
});
Vous pouvez faire la même chose pour éviter ce conflit css avec la balise d'ancrage et aussi pour rendre un div cliquable et rediriger vers le lien de destination. Si vous exécutez ce code, vous trouverez le code d'erreur 404 car il n'y a pas de fichier ici. Merci. Si cela vous aide, veuillez l'accepter.
Votre balisage doit être mis à jour car vous avez des balises div de fermeture manquantes, je ne sais pas si ce n'est que le cas dans le code de votre question. Le balisage doit être:
.item a {
display: block;
}
Vous devez donner au une propriété de style de display: block; comme ceci:
<div class="container">
<div class="row">
<div class="item col-lg-4">
<a href="floor0.html">
<p> floor zero </p>
</a>
</div>
</div>
</div>
L'ancre couvrira désormais l'ensemble de la div et fonctionnera comme vous l'attendez. C'est aussi une bonne idée à noter; si vous utilisez un framework comme Bootstrap, l'ordre des divs est important pour vous assurer que la grille se comporte comme prévu, elle doit toujours être:
container> row> col
Nous avons réussi à résoudre ce problème en supprimant le div avec les classes de colonnes, puis en ajoutant les classes du div supprimé à la balise d'ancrage
<div class="container"> <div class="row"> <a class="item col-lg-4" href="#"> <p> floor zero </p> <br> <br> <br> <br> </a>
Nous ne pouvons pas vraiment vous aider, c'est juste du CSS mais vous ne nous avez pas montré les parties pertinentes. Vous devez déboguer celui-ci vous-même. Si vous êtes vraiment coincé, vous devriez demander à l'un de vos collègues.
avez-vous essayé de mettre les classes col sur l'ancre et de créer le bloc d'affichage d'ancre? (comme ça tu n'as pas besoin du div)