问题:
So I have been given the task of mocking up a new bootstrap version of the building floor map on the web and while trying to make a DIV area clickable and linking to anothe...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
So I have been given the task of mocking up a new bootstrap version of the building floor map on the web and while trying to make a DIV area clickable and linking to another page, the anchor tag used to make the link makes the div layout messed up?
Here is my code and an image
before I add the anchor tag around the div
after I add the anchor tag around the 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>
回答1:
Try reading this: Is putting a div inside an anchor ever correct?.
If your goal is to open a link when the div is clicked you can try putting an onClick=(window.location.href='link here')
event on the div tag or use jQuery event in script $('div').click(function(){window.location.href='link here'});
回答2:
$(".item").click(function() {
window.location = $(this).data("location");
return false;
});
<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>
You can do similar like this to avoid this css conflict with anchor tag and also to make a div clickable and redirect to destination link. If you run this code you will find 404 error code as there is no file here. Thank you. If this helps you then please make it accepted.
回答3:
Your mark up needs to be updated as you have some closing div tags missing, not sure if this just the case in the code in your question. The markup should be:
<div class="container">
<div class="row">
<div class="item col-lg-4">
<a href="floor0.html">
<p> floor zero </p>
</a>
</div>
</div>
</div>
You need to give the <a>
a style property of display: block;
like this:
.item a {
display: block;
}
The anchor will now cover the whole div and work the way you expect it to. It's also a good idea to note; if using a framework like Bootstrap the order of divs is important to make sure the grid behaves as expected, it should always be:
container > row > col
回答4:
Managed to solve this issue by removing the div with the column classes and then adding the classes from the removed div to the anchor tag
<div class="container">
<div class="row">
<a class="item col-lg-4" href="#">
<p> floor zero </p>
<br>
<br>
<br>
<br>
</a>