如何將超鏈接添加到菜單中的圖標？
[英]How can I add hyperlinks to the icon in my menu?
問題描述
大家晚上好，最誠摯的問候。
我正在開發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>
1 個解決方案
解決方案1
1 已采納 2019-07-27 21:45:15
你可以只移動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>
如何在導航欄旁邊添加向下箭頭圖標並使頁面下拉菜單？
[英]How can I add an arrow down icon next to nav bar and make pages drop down menu?
單擊時如何阻止我的引導程序漢堡包圖標和可折疊菜單跳躍？
[英]How can I stop my bootstrap hamburger icon and collapsible menu from jumping when clicked?
如何將另一個子菜單添加到我的 CSS/HTML 菜單？ 我的錯在哪里
[英]How can I add another sub sub menu to my CSS/HTML menu? Where is my mistake
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.