html - 单击时链接不执行任何操作
问题描述
我在尝试单击通过 Bootstrap 创建的“下拉”菜单项中的一些链接时遇到了真正的困难。我怀疑存在 z-index 问题,但我试图将我的位置设置为relative
并在我的整个菜单和单个菜单项上放置更高的 z-index。我还尝试为我认为可能“覆盖”我的菜单的项目设置较低的 z-index,但没有运气。
在查看 Stackoverflow 和 Google 大约一个小时后,一切都指向 z-index 问题。我已经看到了各种建议使用的解决方案,pointer-events
我为各种项目设置了等于none
;也没有运气,
我的代码如下(您可以单击损坏的图像链接打开菜单,头像图像从 PHP/数据库中提取,然后单击“更改头像照片”或“注销”):
body {
position: relative;
z-index: 0;
}
.av_photo {
border-radius: 100px;
border: 3px solid lightgrey;
padding: 5px;
}
.dropleft {
margin-left: 93%;
margin-top: -3.8%;
position: relative;
}
.dropdown-menu {}
.dropdown-menu::before {
position: absolute;
display: inline-block;
border-bottom: 7px solid transparent;
border-top: 7px solid transparent;
border-left: 7px solid #CCC;
display: inline-block;
right: -7px;
top: 42px;
content: '';
}
.dropdown-menu::after {
position: absolute;
display: inline-block;
border-bottom: 6px solid white;
border-top: 6px solid transparent;
border-left: 6px solid transparent;
display: inline-block;
right: -7px;
top: 42px;
content: '';
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
/* Height of the footer */
font-size: 14px;
color: gray;
padding: 5px;
}
.avatardisplay {
display: inline-block;
}
.avatardisplay img {
margin: 25px;
cursor: pointer;
}
.avatardisplay:hover>a {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.avatardisplay:hover>a:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.avatardisplay a {
text-decoration: none;
}
.av {
border-radius: 100px;
border: 3px solid lightgrey;
padding: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script type="text/JavaScript" src="js/chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<link rel="stylesheet" type="text/css" href="css/home.css">
<?php
// get the current URL
$link = $_SERVER['REQUEST_URI'];
?>
</head>
<body>
<ul style="margin-top: 2%; margin-left: 2%" class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="dashboard.php">Reports</a></li>
<div class="navbar dropleft">
<li data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-item">
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="logout.php">Change Avatar Photo</a> <a class="dropdown-item" href="#">Settings</a> <a class="dropdown-item" href="logout.php">Logout</a> </div>
<a href=""><img class="av_photo" src=<?php echo $av ?>></a>
</li>
</div>
</ul>
<div class="container">
<br>
<h3>Quick Overview:</h3>
<hr>
<div class="card-deck">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Sucessful Reports</h5>
<p class="card-text">Reports that were ran where data matches from sent / recieved data.</p>
<button id="successtoggle" class="btn btn-success">
<?php echo $success ?>
</button>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Failed Reports</h5>
<p class="card-text">Reports that were ran where data does not match from sent / recieved data.</p>
<a href="#" id="failtoggle" class="btn btn-danger">
<?php echo $failed ?>
</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Total Reports</h5>
<p class="card-text">Total number of reports ran between success and fail.</p>
<a href="#" id="totaltoggle" class="btn btn-primary">
<?php echo $total ?>
</a>
</div>
</div>
</div>
解决方案
锚标记<a>
必须具有href=
非空属性才能用作链接。我建议href="javascript:void(0)"
为了链接地址有一个“占位符”。
推荐阅读
- python-3.x - 为什么不能从带有 selenium 的网页中提取 p 节点中的所有内容?
- python - python每n秒执行一次函数等待完成
- mysql - 我无法在 laravel 中使用 DB:table() 检索数据
- javascript - 如何有效地将数据存储在数组中?
- r - 在R中将数字转换为特定的日期格式
- php - PHP 文件在 LEMP Docker Compose 设置中不起作用
- java - 如何在 Catalina.out 中禁用休眠日志
- java - 作为jar运行时找不到资源文件夹,而可以找到外部文件夹
- configuration - 是否有工具来管理多个资源和多个配置的资源?
- python - 如何使用循环来验证静态变量的值并在 Python 中运行相应的函数