大家晚上好，最好的问候。
我正在开发一个 Web 应用程序，但在创建菜单时遇到了问题
我想为图像添加超链接，当用户点击菜单项标题和图像时，它们可以被重定向到该部分
在第一项中的示例我有一个名为 stackoverflow 的部分我只能向标题添加超链接但我也想单击图像以重定向到“stackoverflow”部分/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<h1>Administrator</h1>
<br>
<div class="container">
<div class="row text-center mb-5">
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">
<a href="https://stackoverflow.com/">StackOverflow</a>
</div>
<div>
<i class="fas fa-city fa-3x"></i>
</div>
</div>
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Pagos</div>
<div>
<i class="far fa-credit-card fa-3x"></i>
</div>
</div>
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Contabilidad</div>
<div>
<i class="fas fa-hand-holding-usd fa-3x"></i>
</div>
</div>
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Reportar</div>
<div>
<i class="fas fa-exclamation-triangle fa-3x"></i>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Morosos</div>
<div>
<i class="fas fa-user-times fa-3x"></i>
</div>
</div>
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Instalaciones</div>
<div>
<i class="fas fa-swimmer fa-3x"></i>
</div>
</div>
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Contabilidad</div>
<div>
<i class="fas fa-hand-holding-usd fa-3x"></i>
</div>
</div>
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Reportar</div>
<div>
<i class="fas fa-exclamation-triangle fa-3x"></i>
</div>
</div>
</div>
</div>
<!-- Add your site or application content here -->
<script src="https://kit.fontawesome.com/55c228f8f9.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>您可以将a标签向上移动一级，使其包含标题和图标作为一个块。
<a href="https://stackoverflow.com/">
<div class="bg-dark text-white rounded-sm mb-3">
StackOverflow
</div>
<div>
<i class="fas fa-city fa-3x"></i>
</div>
</a>
或者，如果出于某种原因不希望整个想法成为链接，则可以复制链接。
<div class="bg-dark text-white rounded-sm mb-3">
<a href="https://stackoverflow.com/">StackOverflow</a>
</div>
<div>
<a href="https://stackoverflow.com/"><i class="fas fa-city fa-3x"></i></a>
</div>
这是第一个解决方案的片段。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<h1>Administrator</h1>
<br>
<div class="container">
<div class="row text-center mb-5">
<div class="col-sm-3">
<a href="https://stackoverflow.com/">
<div class="bg-dark text-white rounded-sm mb-3">
StackOverflow
</div>
<div>
<i class="fas fa-city fa-3x"></i>
</div>
</a>
</div>
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Pagos</div>
<div>
<i class="far fa-credit-card fa-3x"></i>
</div>
</div>
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Contabilidad</div>
<div>
<i class="fas fa-hand-holding-usd fa-3x"></i>
</div>
</div>
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Reportar</div>
<div>
<i class="fas fa-exclamation-triangle fa-3x"></i>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Morosos</div>
<div>
<i class="fas fa-user-times fa-3x"></i>
</div>
</div>
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Instalaciones</div>
<div>
<i class="fas fa-swimmer fa-3x"></i>
</div>
</div>
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Contabilidad</div>
<div>
<i class="fas fa-hand-holding-usd fa-3x"></i>
</div>
</div>
<div class="col-sm-3">
<div class="bg-dark text-white rounded-sm mb-3">Reportar</div>
<div>
<i class="fas fa-exclamation-triangle fa-3x"></i>
</div>
</div>
</div>
</div>
<!-- Add your site or application content here -->
<script src="https://kit.fontawesome.com/55c228f8f9.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句