gpt4 book ai didi

html - 如何向菜单中的图标添加超链接?

转载 作者:太空宇宙 更新时间:2023-11-04 06:01:45 25 4
gpt4 key购买 nike

大家晚上好,最诚挚的问候。

我正在开发一个网络应用程序,但我在创建菜单时遇到了问题

我想为图片添加超链接,当用户同时点击菜单项标题和图片时,他们可以被重定向到该部分

第一项中的示例我有一个名为 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 标记向上移动一个级别,这样它就可以将标题和图标作为一个 block 包含。

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

关于html - 如何向菜单中的图标添加超链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57236187/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com